尝试从此博客运行todo应用程序：
http://blog.lambda-it.ch/reactive-data-flow-in-angular-2/
它的代码在这里：https://github.com/wmaurer/todomvc-ng2-reactive
我正在将它集成到我的测试应用程序中 - 我有我的路由器并将组件添加到我的路由器配置中：
{ path: '/todo-list', name: 'TodoList', component: TodosComponent },
这不应该破坏事情。
但是当我走那条路时，我得到错误：
EXCEPTION: Template parse errors:
Can't bind to 'ngmodel' since it isn't a known native property ("der class=header><h1>todos</h1><input class=new-todo placeholder="What needs to be done?" autofocus [ERROR ->][(ngmodel)]=viewModel.newTodoTitle (keyup.enter)=add($event)></header><section class=main><input type"): TodosComponent@0:143
Property binding ngforOf not used by any directive on an embedded template ("kbox class=toggle-all [checked]=viewModel.allTodosCompleted (click)=toggleAll()><ul class=todo-list>[ERROR ->]<todo-item *ngfor="#todo of viewModel.todos" [todo]=todo (delete)=delete($event) (edit)=edit($event) "): TodosComponent@0:349
Can't bind to 'routerlink' since it isn't a known native property (" }}</strong> item{{ viewModel.numTodosActive == 1 ? '' : 's' }} left</span><ul class=filters><li><a [ERROR ->][routerlink]="['Todos']">All</a></li><li><a [routerlink]="['TodosFiltered', { filter: 'active' }]">Ac"): TodosComponent@0:711
Can't bind to 'routerlink' since it isn't a known native property (" == 1 ? '' : 's' }} left</span><ul class=filters><li><a [routerlink]="['Todos']">All</a></li><li><a [ERROR ->][routerlink]="['TodosFiltered', { filter: 'active' }]">Active</a></li><li><a [routerlink]="['TodosFil"): TodosComponent@0:755
Can't bind to 'routerlink' since it isn't a known native property ("']">All</a></li><li><a [routerlink]="['TodosFiltered', { filter: 'active' }]">Active</a></li><li><a [ERROR ->][routerlink]="['TodosFiltered', { filter: 'completed' }]">Completed</a></li></ul><button class=clear-"): TodosComponent@0:832
Can't bind to 'ngif' since it isn't a known native property ("]="['TodosFiltered', { filter: 'completed' }]">Completed</a></li></ul><button class=clear-completed [ERROR ->]*ngif="viewModel.numTodosCompleted > 0" (click)=removeCompleted()>Clear completed ({{ viewModel.numTo"): TodosComponent@0:943
Property binding ngif not used by any directive on an embedded template ("ive</a></li><li><a [routerlink]="['TodosFiltered', { filter: 'completed' }]">Completed</a></li></ul>[ERROR ->]<button class=clear-completed *ngif="viewModel.numTodosCompleted > 0" (click)=removeCompleted()>Clear"): TodosComponent@0:913
Can't bind to 'ngif' since it isn't a known native property ("$event) (edit)=edit($event) (toggle)=toggle($event)></todo-item></ul></section><footer class=footer [ERROR ->]*ngif="viewModel.numTodos > 0"><span class=todo-count><strong>{{ viewModel.numTodosActive }}</strong>"): TodosComponent@0:522
Property binding ngif not used by any directive on an embedded template ("todo (delete)=delete($event) (edit)=edit($event) (toggle)=toggle($event)></todo-item></ul></section>[ERROR ->]<footer class=footer *ngif="viewModel.numTodos > 0"><span class=todo-count><strong>{{ viewModel.numTo"): TodosComponent@0:501
Can't bind to 'ngif' since it isn't a known native property ("<section [ERROR ->]*ngif=viewModel class=todoapp><header class=header><h1>todos</h1><input class=new-todo placeholder="W"): TodosComponent@0:9
Property binding ngif not used by any directive on an embedded template ("[ERROR ->]<section *ngif=viewModel class=todoapp><header class=header><h1>todos</h1><input class=new-todo place"): TodosComponent@0:0
模板如下所示：
<section *ngIf="viewModel" class="todoapp">
<header class="header">
<h1> todos </h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus="" [(ngModel)]="viewModel.newTodoTitle" (keyup.enter)="add($event)" />
</header>
<section class="main">
<input type="checkbox" class="toggle-all" [checked]="viewModel.allTodosCompleted" (click)="toggleAll()" />
<ul class="todo-list">
<todo-item *ngFor="#todo of viewModel.todos" [todo]="todo" (delete)="delete($event)" (edit)="edit($event)" (toggle)="toggle($event)"></todo-item>
</ul>
</section>
<footer class="footer" *ngIf="viewModel.numTodos > 0">
<span class="todo-count"><strong>{{ viewModel.numTodosActive }}</strong> item{{ viewModel.numTodosActive == 1 ? '' : 's' }} left</span>
<ul class="filters">
<li> <a [routerLink]="['Todos']"> All </a> </li>
<li> <a [routerLink]="['TodosFiltered', { filter: 'active' }]"> Active </a> </li>
<li> <a [routerLink]="['TodosFiltered', { filter: 'completed' }]"> Completed </a> </li>
</ul>
<button class="clear-completed" *ngIf="viewModel.numTodosCompleted > 0" (click)="removeCompleted()">Clear completed ({{ viewModel.numTodosCompleted }})</button>
</footer>
</section>
我无法找到错误的内容，我在这个错误中搜索的答案并没有说出新的内容。
这里可能有什么问题？
更新
我在webpack中使用minifier，是webpack config的一部分：
module: {
preLoaders: [
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
// TODO(gdi2290): `exclude: [ helpers.root('node_modules/rxjs') ]` fixed with rxjs 5 beta.3 release
{ test: /\.js$/, loader: 'source-map-loader', exclude: [ helpers.root('node_modules/rxjs') ] }
],
loaders: [
// Support for .ts files.
{ test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] },
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },
// support for .html as raw text
//{ test: /\.html$/, loader: 'raw-loader', exclude: [ helpers.root('src/index.html') ] },
{ test: /\.html$/, loaders: ['raw-loader', 'html-minify-loader'],
exclude: [ helpers.root('src/index.html') ] },
{
test: /\.scss$/,
exclude: /node_modules/,
loader: 'raw-loader!sass-loader'
}
]
},
但是minifier不应该破坏imo。
更新
我取消注释minifier配置，但这仍然无济于事。我发布整个webpack配置文件：
// @AngularClass
var webpack = require('webpack');
var helpers = require('./helpers');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
var HMR = helpers.hasProcessFlag('hot');
var metadata = {
title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
baseUrl: '/',
host: 'localhost',
port: 3000,
ENV: ENV,
HMR: HMR
};
/*
* Config
* with default values at webpack.default.conf
*/
module.exports = {
// static data for index.html
metadata: metadata,
devtool: 'cheap-module-eval-source-map',
// cache: true,
debug: true,
// devtool: 'eval' // for faster builds use 'eval'
// our angular app
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'main': './src/main.ts'
},
resolve: {
extensions: ['', '.ts', '.js']
},
// Config for our build files
output: {
path: helpers.root('dist'),
filename: '[name].bundle.js',
sourceMapFilename: '[name].map',
chunkFilename: '[id].chunk.js'
},
module: {
preLoaders: [
// { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
// TODO(gdi2290): `exclude: [ helpers.root('node_modules/rxjs') ]` fixed with rxjs 5 beta.3 release
{ test: /\.js$/, loader: 'source-map-loader', exclude: [ helpers.root('node_modules/rxjs') ] }
],
loaders: [
// Support for .ts files.
{ test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] },
// Support for *.json files.
{ test: /\.json$/, loader: 'json-loader' },
// Support for CSS as raw text
{ test: /\.css$/, loader: 'raw-loader' },
// support for .html as raw text
/*{ test: /\.html$/, loader: 'raw-loader', exclude: [ helpers.root('src/index.html') ] },*/
{ test: /\.html$/, loaders: ['raw-loader', 'html-minify-loader'],
exclude: [ helpers.root('src/index.html') ]
},
{
test: /\.scss$/,
exclude: /node_modules/,
loader: 'raw-loader!sass-loader'
}
]
},
'html-minify-loader': {
empty: true, // KEEP empty attributes
cdata: true, // KEEP CDATA from scripts
comments: true, // KEEP comments
dom: { // options of !(htmlparser2)[https://github.com/fb55/htmlparser2]
lowerCaseAttributeNames: false, // do not call .toLowerCase for each attribute name (Angular2 use camelCase attributes)
}
},
plugins: [
new ForkCheckerPlugin(),
new webpack.optimize.OccurenceOrderPlugin(true),
new webpack.optimize.CommonsChunkPlugin({ name: ['main', 'vendor', 'polyfills'], minChunks: Infinity }),
// static assets
new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
// generating html
new HtmlWebpackPlugin({ template: 'src/index.html', chunksSortMode: 'none',
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
// removeTagWhitespace: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
} }),
// Environment helpers (when adding more properties make sure you include them in custom-typings.d.ts)
new webpack.DefinePlugin({
'ENV': JSON.stringify(metadata.ENV),
'HMR': HMR
}),
],
// Other module loader config
// our Webpack Development Server config
tslint: {
emitErrors: false,
failOnHint: false,
resourcePath: 'src',
},
devServer: {
port: metadata.port,
host: metadata.host,
historyApiFallback: true,
watchOptions: {
aggregateTimeout: 300,
poll: 1000
}
},
node: {
global: 'window',
process: true,
crypto: 'empty',
module: false,
clearImmediate: false,
setImmediate: false
}
};
你能看到这里有什么问题吗？
答案 0 :(得分：2)
正如我在您的问题中所看到的，您正在使用html-minify-loader。
在存储库中，您可以看到此example
'html-minify-loader': {
dom: {
lowerCaseAttributeNames: false
// do not call .toLowerCase for each attribute name (Angular2 use camelCase attributes)
}
}
因此，通过在webpack配置中添加该选项，您应该没问题。
修改
请确保您使用的是最新版本的插件，我对其进行了测试（使用您的配置）并且效果非常好。
答案 1 :(得分：1)
加入Eric Martinez回答：
可能我没有通过停止并运行命令
来重启服务器npm run server
重新启动后 - 再也没有这样的错误了。
答案 2 :(得分：0)
这是我为使用html-loader的生产Webpack构建解决的方法：
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: {
caseSensitive: true
}
}
}