我使用html-loader加载我的html模板和文件加载器来加载模板中的图像 . 这在dev中运行得很好但是当我运行build:prod并运行输出时,我得到一个模板解析错误 .
似乎所有angular2内置指令(例如,* ngFor,* ngIf)都被转换为全部小写(例如,* ngfor,* ngif),这些都是错误的例子 .
我尝试创建一个单独的项目,这一次,不使用角度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']“> {}”):t @ 0:359无法绑定到'routerlinkactive',因为它不是'a'的已知属性 . (“”item ui red“* ngfor =”let r of routes“>] [routerlinkactive] =”['active']“> {}主菜单] * ngfor =”let r of routes“>主菜单[错误 - >]] * ngif = bolWidthLess1000> [错误 - >]] [routerlink] = r.routerLink>] [routerlink] = r.routerLink [routerlinkactive] =“['active']”> {}] [routerlinkactive] =“['active']”> {}“):t @ 0:674无法绑定到'ngforOf',因为它不是''的已知属性'一个' . (“/ div>] * ngfor =”let r of routes“class =”item mainmenu“[routerlink] = r.routerLink>”):t @ 0:540属性绑定ngforOf未被嵌入式模板上的任何指令使用 . 确保属性名称拼写正确,并且所有指令都列在“指令”部分中 . (“> [ERROR - >] {}] * ngif =!bolWidthLess1000>”):t @ 0:512属性绑定ngif未被嵌入式模板上的任何指令使用 . 确保属性名称拼写正确,并且所有指令都列在“指令”部分中 . (“routerlink”= r.routerLink [routerlinkactive] =“['active']”> {} [错误 - >]
1 回答
在loader查询中将minimize param设置为false,如下所示 .
{ test: /\.html$/, loader: 'html?minimize=false' }
Or
您可以将
html-loader
升级为0.4.3
并使用以下配置 .{ test: /\.html$/, loader: 'html?minimize=true&caseSensitive: true}