我应该导入 BrowserModule 还是 CommonModule？

Question

几乎所有要在浏览器中使用的应用的根模块 (AppModule ) 都应该从 @angular/platform-browser 模块中导入 BrowserModule 。

BrowserModule 提供了浏览器平台下运行的基础指令和服务，该模块内部重新导出了 CommonModule，这意味着 AppModule 中组件也可以访问 Angular 的内置指令。

在其它任何模块中都不要导入 BrowserModule 。在特性模块和惰性加载模块中应该导入 CommonModule 。因为它们只需要 Angular 中提供的内置指令，而不需要重新初始化应用级的服务。

特性模块中导入 CommonModule 可以让它能用在任何目标平台上，不仅是浏览器平台。

---

在 Angular 中， BrowserModule 和 CommonModule 的用途和使用场景不同，选择导入哪个取决于你的模块类型和用途：

---

1. BrowserModule

• 用途 : 主要用于配置应用的 根模块 。
• 内容 : 提供运行在浏览器中的 Angular 应用所需的核心功能（比如指令： NgIf 、 NgFor 等）。
• 场景 :
  • 仅用于 根模块 （ AppModule ）。
  • 如果你导入 BrowserModule ，会自动包含 CommonModule 的功能。

  注意 : 每个应用中只需导入一次 BrowserModule ，因为它配置了一些应用启动所需的核心服务。

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

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

---

2. CommonModule

• 用途 : 用于配置 特性模块 （Feature Module）。
• 内容 : 提供 Angular 常用的指令和管道（如 NgIf 、 NgFor 等）。
• 场景 :
  • 当你创建特性模块时，使用 CommonModule ，而 不要 使用 BrowserModule 。
  • 它适合懒加载模块或可复用的特性模块中。

   import { CommonModule } from '@angular/common';

   @NgModule({
     declarations: [
       MyFeatureComponent,
     ],
     imports: [
       CommonModule,
     ]
   })
   export class MyFeatureModule { }

---

总结

• BrowserModule ：根模块专用，只导入一次。
• CommonModule ：特性模块或共享模块中使用。

如果你在创建新的模块时不确定，通常检查模块是否为根模块：

• 如果是根模块，导入 BrowserModule 。
• 如果是特性模块，导入 CommonModule 。