第四章：Standalone 与 NgModule —— 单楼自主报建，还是园区总备案

这是 Angular 心智里非常关键的一条线。

截至 2026-03-28，Angular 官方对新代码推荐的主线是：standalone component / directive / pipe。
但 NgModule 仍然大量存在于既有企业项目中，理解它依然非常重要。

#1. Standalone：单楼自己声明依赖

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

@Component({
  selector: 'campus-dashboard',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h2>园区总览</h2>
    <p>今日访客：{{ visitors }}</p>
  `,
})
export class DashboardComponent {
  visitors = 128;
}

这里的意思很直接：

这栋楼自己写明自己依赖什么
谁要用它，就显式导入它
依赖图更局部、更清楚

#2. NgModule：园区级总备案

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LegacyReportComponent } from './legacy-report.component';

@NgModule({
  declarations: [LegacyReportComponent],
  imports: [CommonModule],
  exports: [LegacyReportComponent],
})
export class ReportsModule {}

NgModule 的历史角色很像：

text

园区总备案中心
├── 哪些楼归我管（declarations）
├── 我引入了哪些外部设施（imports）
├── 我向外开放哪些能力（exports）
└── 我提供哪些公共服务（providers）

#3. 两者真正的关系

不要把它理解成“新旧大战”，更准确的理解是：

standalone：更适合新建项目和局部依赖清晰的架构
NgModule：更适合理解和维护既有模块化园区

text

standalone：楼自己报建
NgModule：园区统一备案

企业里最危险的不是用哪一种，而是团队没人搞清依赖边界。