I am currently working on an Angular (Angular2 RC4) application and I'm facing some challenges running it with the live server in nodejs.
Any suggestions on how to troubleshoot the error showing up in the Chrome console would be greatly appreciated.
Error in Chrome console:
browser_adapter.ts:82
EXCEPTION: Template parse errors:
Property binding ngif not utilized by any directive on an embedded template. Please ensure that the property name is spelled correctly and all directives are listed in the "directives" section. ("
</video-list>
[ERROR ->]<video-detail *ngif="selectedVideo" [video]="selectedVideo">
</video-detail>"): AppComponent@8:0**
app.component.ts
import {Input, Output, Component} from '@angular/core'
import {Config} from './config.service'
import {Video} from './video'
import {VideoListComponent} from './videolist.component'
import {VideoDetailComponent} from './videodetail.component'
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [VideoListComponent, VideoDetailComponent]
})
export class AppComponent {
title = Config.TITLE_PAGE;
videos: Array<Video>;
selectedVideo : Video;
constructor() {
this.videos = [
new Video(1, "Test", "www.test.com", "Test Description"),
new Video(2, "Test 2", "www.test2.com")
]
}
onSelectVideo(video) {
//console.log(JSON.stringify(video));
this.selectedVideo = video;
}
}
app.component.html
<h1 class="jumbotron">
{{title}}
</h1>
<!-- concept [binding] videos receives values from AppComponent.ts-->
<video-list [videos]="videos"
(selectVideo)="onSelectVideo($event)">
</video-list>
<video-detail *ngif="selectedVideo" [video]="selectedVideo">
</video-detail>
package.json
{
"name": "angularbase",
"version": "1.0.0",
"description": "Base Project",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"project",
"base",
"angular",
"angular2"
],
"author": "Eduardo Cordeiro",
"license": "ISC",
"dependencies": {
"@angular/common": "^2.0.0-rc.4",
"@angular/compiler": "^2.0.0-rc.4",
"@angular/core": "^2.0.0-rc.4",
"@angular/forms": "^0.2.0",
"@angular/http": "^2.0.0-rc.4",
"@angular/platform-browser": "^2.0.0-rc.4",
"@angular/platform-browser-dynamic": "^2.0.0-rc.4",
"@angular/upgrade": "^2.0.0-rc.4",
"angular2-in-memory-web-api": "0.0.7",
"bootstrap": "^3.3.6",
"rxjs": "^5.0.0-beta.6",
"systemjs": "^0.19.27",
"zone.js": "^0.6.12"
}
}
systemjs.config.js
(function (global) {
// systemjs map config
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages that can be loaded by systemjs
// if the file is not found in the map
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// map angular packages according to the packageName provided above
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "system",
"sourceMap": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"watch": true
},
"exclude": [
"node_modules"
]
}