2
試圖運行從這個博客待辦事項應用：不能綁定到「NG-模型」，因爲它不是一個已知的原生屬性
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"): [email protected]: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) "): [email protected]: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"): [email protected]: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"): [email protected]: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-"): [email protected]: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"): [email protected]: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"): [email protected]: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>"): [email protected]: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"): [email protected]: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"): [email protected]: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"): [email protected]: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部分：
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
}
};
你能看到這裏有什麼問題嗎？
你使用某種類型的html minifier嗎？你的模板很好，但錯誤指向ngModel被小寫。實際上，錯誤消息中的所有內容都是小寫的。 –
@DariusV你必須在答案中告訴我，它不起作用，當問題被編輯時我沒有收到通知。 –
我已經更新了答案 –