AngularでNG0303: Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’
今回はAngularでngIfを使ったときに下記のようなエラーが起きたときの対処法についてご紹介していこうと思います。
|
1 2 |
NG0303: Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the '_TestComponent' component template). If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is included in the '@Component.imports' of this component. |
Angularのバージョンは18となります。
AngularでNG0303: Can’t bind to 'ngIf’ since it isn’t a known property of 'div’
結論を言うとAngularでngIfを使うためにはCommonModuleをインポートしなければなりません。
スタンドアロンコンポーネントを使用している場合は対象のTSファイルにCommonModuleをインポートする記述を追加しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; // 追加 @Component({ selector: 'app-test', standalone: true, imports: [CommonModule], // 追加 templateUrl: './test.component.html', styleUrls: ['./test.component.scss'] }) export class TestComponent { isVisible: boolean = true; } |
モジュールファイルでの修正を行う場合は次のようになると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; // 追加 import { AppComponent } from './app.component'; import { TestComponent } from './test.component'; // 例: TestComponentを使用する場合 @NgModule({ declarations: [ AppComponent, TestComponent // 例: TestComponentを使用する場合 ], imports: [ BrowserModule, CommonModule // 追加 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
終わりに
今回はAngularでngIfを使ったときに冒頭のようなエラーが起きたときの対処法についてご紹介いたしました。