Angular报错：cann‘t bind to ngClass since it is‘t a known property of div

遇到的错误：

Can't bind to 'ngClass' since it isn't a known property of 'div'

这个错误是 Angular 中 最常见的模板编译错误之一，通常出现在你试图使用 ngClass 指令，但 Angular 没有识别它的情况下。

---

✅ 错误的根本原因

Angular 不知道 ngClass 是什么，因为你还没有在当前模块中引入 CommonModule 或 BrowserModule。

---

解决办法

▶ 如果你是在 AppModule（根模块）中写组件：

应该已经引入了 BrowserModule，它包含了 ngClass，比如：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

✅ 如果已经这样写了，但还是报错，请确认 AppComponent 里是否正确声明了你出错的组件。

---

▶ 如果你是在 子模块 / 懒加载模块 中写组件：

必须在该模块中引入 CommonModule，因为 ngClass 属于它。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { YourComponent } from './your.component';

@NgModule({
  declarations: [YourComponent],
  imports: [CommonModule]
})
export class YourFeatureModule {}

---

原理简要解释

• ngClass 是一个结构型指令，由 Angular 的 CommonModule 提供。

• 根模块用 BrowserModule（包含了 CommonModule）

• 子模块/特性模块用 CommonModule

---

❗️其他可能原因（少见但可能）

1. 拼写错误：确保写的是 ngClass（注意大小写）

2. 组件没声明在模块中：该组件未在 declarations 中注册

3. 模块未正确导入/懒加载错误