webpack html-loaders 小写 angular 2 内置指令

Posted 2023-02-22

【中文标题】webpack html-loaders 小写 angular 2 内置指令

【英文标题】：webpack html-loaders lowercase angular 2 built-in directives

【发布时间】：2017-03-30 07:11:05

【问题描述】：

我正在使用 html-loader 来加载我的 html 模板和 file-loader 来加载我在模板中的图像。这在 dev 中运行得很好，但是当我运行 build:prod 并运行输出时，我得到一个模板解析错误。

似乎所有 angular2 内置指令（例如，*ngFor、*ngIf）都转换为全小写（例如，*ngfor、*ngif），这会导致错误。

我尝试创建一个单独的项目，这一次，没有使用 Angular 2 中的任何内置指令，一切正常。

还有其他我可以使用的加载器吗？如何正确加载这些模板以及这些模板使用的图像？

这是我的 webpack.config

var webpack = require('webpack');
var HtmlWebPackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = 
    entry:'./src/main.ts',

    output:
        path:'./dist',
        filename:'app.bundle.js'
    ,
    module:
        loaders:[test:/\.ts$/, loader:'ts-loader',
         test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] ,
       test: /\.html$/, loader: 'html-loader' ,
      test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader",
      // test: /\.html$/, loader: 'raw-loader' ,
      // test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' 
      ]

    /*   loaders: [
      // .ts files for TypeScript
       test: /\.ts$/, loaders: ['awesome-typescript-loader', 'angular2-template-loader'] ,
       test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] ,
       test: /\.html$/, loader: 'raw-loader' 
    ]*/
    ,
    resolve:
        root: [ path.join(__dirname, 'src') ], //add this for dev server
        extensions:['','.js','.ts']
    ,
    plugins:[

        //inject all the files above into this file
        new HtmlWebPackPlugin(
            template: './src/index.html'
        ),
        new webpack.ProvidePlugin(
            jQuery: 'jquery',
                $: 'jquery',
                jquery: 'jquery'
        )

    ]

下面是我得到的解析错误。

错误：模板解析错误：无法绑定到“routerlink”，因为它 不是“a”的已知属性。 ("r>菜单][routerlink]=r.routerLink [routerlinkactive]="['active']">r.text "): t@0:359 不能绑定到 'routerlinkactive' 因为它不是 'a' 的已知属性。 (""item ui red" *ngfor="let r of routes"> ][routerlinkactive]="['active']">r.text Menu ]*ngfor="let r of routes"> 主菜单 [ERROR ->] ]*ngif=bolWidthLess1000>

[错误->] ][routerlink]=r.routerLink> ][routerlink]=r.routerLink [routerlinkactive]="['active']">r.text ][routerlinkactive]="['active']">r.text "): t@0:674 无法绑定 'ngforOf' 因为它不是 'a' 的已知属性。 ("/div>

]*ngfor="let r of routes" class="item mainmenu" [routerlink]=r.routerLink> "): t@0:540 属性绑定 ngforOf 未被任何指令使用 在嵌入式模板上。确保属性名称是拼写的 正确，所有指令都列在“指令”部分。 ("> [错误 ->] r.text ]*ngif=!bolWidthLess1000> "): t@0:512 属性绑定 ngif 嵌入式模板上的任何指令均未使用。确保 属性名称拼写正确，所有指令都列在 “指令”部分。 ("routerlink]=r.routerLink [routerlinkactive]="['active']">r.text [错误->]

【参考方案1】：

在加载器查询中将最小化参数设置为 false，如下所示。

test: /\.html$/, loader: 'html?minimize=false'

或者

您可以将html-loader 升级到0.4.3 并使用以下配置。

test: /\.html$/, loader: 'html?minimize=true&caseSensitive: true

【讨论】：

只有 4.3 有 caseSensitive 选项？我使用的是 4.4，但它似乎不起作用，所以只做了最小化=false。

我花了一天中最好的时间来追踪这个问题，所以感谢你们的发帖！

检查这个***.com/a/47615772/9268047，它对我有用