21

I am creating a simple application in Angular (Angular2 RC4) and I'm finding it difficult to run the application with the live server in nodejs.

I would like to aid as to what I can do to work around the error that is appearing in the Chrome console.

Erro in console 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"
]
}
030
  • 10,842
  • 12
  • 78
  • 123
Eduardo Cordeiro
  • 351
  • 1
  • 3
  • 7

3 Answers3

35

Angular2 directives are case-sensitive. The directive is *ngIf, with capital 'I'.

Angular throws an error for *ngif, because it doesn't know what such directive is.

Ema4rl
  • 577
  • 1
  • 6
  • 17
Mateusz Kocz
  • 4,492
  • 1
  • 25
  • 27
  • That's true. Please look out if you're using GIT and Visual Studio. When comparing versions of given file and copying some parts, sometimes it modified it to lower-case (or maybe I did something wrong). Then I got lots of these errors. If it's not me being a dummy, then please watch out :) – Sielu Aug 02 '17 at 08:43
  • 1
    I am using `*ngIf` and I still get this error. This seems to fix it though: https://stackoverflow.com/questions/42063686/cant-bind-to-ngif-since-it-isnt-a-known-property-of-div-in-production-buil – The Muffin Man Sep 16 '17 at 23:54
  • 3
    That's right. Today you not only need to write the directive's name with proper capitalization, but you also need to import the `CommonModule` (`BrowserModule` just re-exports it). The OP's problem, however, was due to the capitalization only, as there was no modules concept in RC4. – Mateusz Kocz Sep 17 '17 at 16:09
35

You should import the CommonModule either in the root module (AppModule), or in the module that you want to use *ngIf in (e.g. TestModule).

import { CommonModule } from "@angular/common";
...
@NgModule({
    imports: [CommonModule]
    ...
})
export class AppModule { }
Bijender Kumar
  • 383
  • 3
  • 5
0

Note: this applies mostly to those using VSCode as a code editor.

This appeared for me in VS Code after creating an Angular 13 application. The solution was to update the Angular Language Service extension which ensures that Angular: View-engine setting "use the legacy view engine language service" is not set.

More details here.

Alexei - check Codidact
  • 22,016
  • 16
  • 145
  • 164