こんにちは。Angularを学習中の近ため管理人です。コンポーネント指向でSPAに最適と言われているJavaScriptフレームワークのAngularですが、基本文法を学んでいる際に詰まったので、備忘録として残しておきます。
エラー発生の経緯
以下のように記述していました。
//app.component.html
<div *ngIf="isAngular">Angular!</div>isAngularフラグは以下のように記述していました。
//app.component.tsimport { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'Hello Angular!';
isAngular = false;
}エラー内容：NG0303
エラー内容は以下の通りです。
NG0303: Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’ (used in the ‘_AppComponent’ 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.
翻訳すると
NG0303: ‘ngIf’ は ‘div’ (‘_AppComponent’ コンポーネント テンプレートで使用) の既知のプロパティではないため、バインドできません。’ngIf’ が Angular 制御フロー ディレクティブである場合は、このコンポーネントの ‘@Component.imports’ に ‘NgIf’ ディレクティブまたは ‘CommonModule’ のいずれかが含まれていることを確認してください。
解決方法
★の箇所を追記修正することで解決しました。
//app.component.tsimport { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';//★
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet], //★
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'Hello Angular!';
isAngular = false;
}以上です。皆さんの参考になれば幸いです。
コメント