I am creating a simple application in Angular (Angular2 RC4) and it is difficult for me to run the application with a live server in nodejs.
I would like to help in what I can do to get around the error that appears on the Chrome console.
Erro in the Chrome console:
browser_adapter.ts:82 EXCEPTION: Template parse errors: Property binding ngif not used by any directive on an embedded template. Make sure 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) {
app.component.html
<h1 class="jumbotron"> {{title}} </h1> <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": "Projeto Base", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "projeto", "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) { // mapa de carregamento do systemjs 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' }; // pacotes que o systemjs pode carregar // caso não encontre o arquivo no mapa 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', ]; // mapeia os pacotes do angular de acordo com o packageName acima 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" ] }