Powiązanie własności ngif nie jest używane przez żadną dyrektywę we wbudowanym szablonie

Question

Tworzę prostą aplikację w Angularu (Angular2 RC4) i mam problem z uruchomieniem aplikacji z serwerem na żywo w usłudze nodejs.

Chciałbym pomóc, co mogę zrobić, aby obejść błąd pojawiający się w konsoli Chrome.

Erro w konsoli Chrome:

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) { 
    //console.log(JSON.stringify(video)); 
    this.selectedVideo = video; 
} 
} 

app.component.html

<h1 class="jumbotron"> 
    {{title}} 
</h1> 
<!-- conceito [binding] videos recebe os valores do 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": "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" 
] 
} 

Answer 1

dyrektyw Angular2 jest rozróżniana. Dyrektywa to *ngIf, z kapitałem "I".

Kątowa zgłasza błąd dla *ngif, ponieważ nie wie, jaka jest taka dyrektywa.