Reputation: 4233
Trying to run a todo application from this blog:
http://blog.lambda-it.ch/reactive-data-flow-in-angular-2/
Its code is here: https://github.com/wmaurer/todomvc-ng2-reactive
I am integrating it into my test application - I have my router and added the component to my router config:
{ path: '/todo-list', name: 'TodoList', component: TodosComponent },
This should not break things.
But when I go to that route, I get error:
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
The template looks like this:
<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>
I am not able to find what is wrong, the answers which I searched by this err telling nothing new.
What could be wrong here?
Update:
I am using minifier in webpack, part of 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'
}
]
},
But minifier should not break things imo.
Update
I uncommented minifier config, but this still does not help. I am posting whole webpack config file:
// @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
}
};
Can you see what is wrong here?
Upvotes: 3
Views: 1223
Reputation: 4154
Here is how I solved the issue for production webpack builds that use html-loader :
{
test: /\.html$/,
loader: 'html-loader',
options: {
minimize: {
caseSensitive: true
}
}
}
Upvotes: 0
Reputation: 4233
Add up to Eric Martinez answer:
Probably I did not restart the server by stopping and running command
npm run server
After restarting - there is no such error anymore.
Upvotes: 1
Reputation: 31777
As I see in your question, you're using html-minify-loader.
In the repository you can see this example
'html-minify-loader': {
dom: {
lowerCaseAttributeNames: false
// do not call .toLowerCase for each attribute name (Angular2 use camelCase attributes)
}
}
So by adding that option in your webpack config you should be fine.
Edit
Make sure you're using the latest version of the plugin, I tested it (with your config) and it worked perfectly.
Upvotes: 2