Angular 16：如何将非独立应用转为独立组件应用？

核心原理 #

Angular独立组件的核心是摆脱NgModule的聚合依赖，组件可直接声明自身需要的模块、子组件、指令、管道；全局级别的配置（如服务提供者、通用模块）统一放在app.config.ts中，通过main.ts引导应用时加载，无需再通过AppModule做集中管理。

具体转换步骤 #

1. 全局模块迁移（如HttpClientModule、CoreModule） #

• 对于通用功能模块（比如HttpClientModule）：优先用Angular提供的独立API替代，比如用provideHttpClient()替代HttpClientModule，直接在app.config.ts的providers数组中配置。
• 对于自定义模块（比如CoreModule）：用importProvidersFrom()将其导入到app.config.ts的全局配置中，模块内的服务、导出的组件/指令会全局生效。

  // app.config.ts
  import { ApplicationConfig } from '@angular/core';
  import { provideRouter } from '@angular/router';
  import { provideHttpClient } from '@angular/common/http'; // 替代HttpClientModule
  import { importProvidersFrom } from '@angular/core';
  import { CoreModule } from './core/core.module';
  import { routes } from './app.routes';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideRouter(routes),
      provideHttpClient(), // 全局提供HttpClient能力
      importProvidersFrom(CoreModule) // 导入自定义CoreModule的内容
    ]
  };
  

2. 组件声明迁移 #

原AppModule中declarations数组的所有组件，需要逐个修改为独立组件：

• 在组件的@Component装饰器中添加standalone: true
• 将原AppModule中imports里的模块（比如CommonModule），移到当前组件的imports数组中
• 如果组件依赖其他子组件，直接在imports数组中导入对应的独立组件

  // 原非独立组件
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html'
  })
  export class HeaderComponent {}
  
  // 修改为独立组件
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    standalone: true,
    imports: [CommonModule] // 原AppModule中全局导入的模块移到这里
  })
  export class HeaderComponent {}
  

• 根组件AppComponent默认已标记为独立组件，直接在其imports数组中添加需要的子组件/模块即可。

3. 提供者配置迁移 #

原AppModule中providers数组的内容，分两种情况处理：

• 全局服务/提供者：直接迁移到app.config.ts的providers数组中

  // app.config.ts
  export const appConfig: ApplicationConfig = {
    providers: [
      // 原AppModule中的全局提供者直接迁移
      AuthService,
      { provide: BASE_API_URL, useValue: 'https://api.example.com' }
    ]
  };
  

• 组件专属提供者：如果是某个组件私有的服务，直接移到该组件的@Component装饰器的providers数组中。

4. 路由适配 #

独立项目的路由逻辑和非独立项目一致，但路由中引用的组件必须是独立组件：

• 先把原路由中用到的非独立组件全部修改为standalone: true
• 路由数组可单独放在app.routes.ts中，通过provideRouter()传入app.config.ts即可。

常见问题排查 #

• 出现NG0308: Cannot find component X：检查组件是否标记了standalone: true，或者是否在父组件的imports数组中导入了该组件/其所在模块。
• 全局服务无法注入：确认服务已添加到app.config.ts的providers中，或者给服务添加providedIn: 'root'标记。

内容的提问来源于stack exchange，提问作者leroyv