独立组件(Angular 14+,在较新版本中是默认方式)允许组件直接声明自己的依赖项,而无需属于 NgModule。它们大大减少了样板代码,现在是构建 Angular 应用的推荐方式。
一个独立组件
ts
{ } ;
{ } ;
{ } ;
({
: ,
: ,
: [, ],
: ,
})
{
users = [];
}
该组件准确导入其模板使用的内容(CommonModule 用于 *ngFor、RouterLink 用于链接)— 其依赖项是显式的且共位置的,而不是在单独的 NgModule 中声明。
NgModule approach: Standalone approach:
──────────────────────────────────────────────────────────────
@NgModule({ declarations:[Comp], @Component({ standalone: true,
imports:[CommonModule] }) imports:[CommonModule], ... })
→ extra file, indirection → everything in one place
import { bootstrapApplication } from "@angular/platform-browser";
import { provideRouter } from "@angular/router";
import { provideHttpClient } from "@angular/common/http";
bootstrapApplication(AppComponent, {
providers: [
provideRouter(routes), // configure router functionally
provideHttpClient(), // HttpClient without HttpClientModule
],
});
独立应用用 bootstrapApplication 和 provideX 函数替换根 AppModule — 一个更简洁的、基于函数的配置。
✓ Less boilerplate — no NgModule files to maintain
✓ Explicit dependencies — see exactly what a component uses
✓ Easier lazy loading — loadComponent() directly
✓ Simpler mental model — components are self-contained units
✓ Better tree-shaking potential
独立组件是 Angular 的现代方向 — 框架现在默认使用独立方式进行脚手架,并提供 provideX 函数来无需模块地配置功能。
它们消除了长期存在的 NgModule 开销,使依赖项明确且局部化,并简化了懒加载和整体的心智模型。
理解独立组件(以及 bootstrapApplication/provideRouter/provideHttpClient 设置)对于在当前 Angular 中工作至关重要,而对于遗留代码仍然需要 NgModule 知识。