如何将现有 Angular 项目迁移到完全独立（Standalone）架构-js教程-PHP中文网

如何将现有 Angular 项目迁移到完全独立（Standalone）架构

本文详解如何通过 angular cli 内置迁移工具，分步将传统 ngmodule 架构的项目（如从 v13 升级至 v16 后）安全、自动化地转为完全 standalone 模式，并为升级至 angular 17 做好准备。

本文详解如何通过 angular cli 内置迁移工具，分步将传统 ngmodule 架构的项目（如从 v13 升级至 v16 后）安全、自动化地转为完全 standalone 模式，并为升级至 angular 17 做好准备。

Angular 自 v14 起大力推广 standalone 架构，而 v17 更是默认启用 standalone 模式并正式弃用 @angular/platform-browser-dynamic 中的 platformBrowserDynamic().bootstrapModule()。因此，将已升级至 Angular 16 的项目彻底迁移为 standalone 架构，不仅是最佳实践，更是平滑升级至 v17 的必要前提。

Angular CLI 提供了官方、可信赖的自动化迁移工具：@angular/core:standalone。该 schematics 并非“一键完成”，而是采用分阶段、可验证、渐进式策略，确保每一步变更均可构建、可运行，大幅降低重构风险。

✅ 迁移四步法（必须严格按序执行）

在项目根目录下依次运行以下命令，并每次执行后务必验证应用能否正常启动（ng serve）且核心功能无异常：

转换所有可独立声明的类为 standalone
```
ng generate @angular/core:standalone
```
在交互式提示中选择：Convert all components, directives and pipes to standalone

此步会为每个 @Component、@Directive、@Pipe 添加 standalone: true，并自动注入其依赖（如 imports: [CommonModule, FormsModule]），同时移除它们在原有 NgModule 中的 declarations 条目。
清理冗余 NgModule 类
再次运行相同命令：
```
ng generate @angular/core:standalone
```
选择：Remove unnecessary NgModule classes

工具将识别并删除那些仅用于声明/导出、且不再被任何其他模块 imports 的 NgModule（如空模块或仅含已转 standalone 类的模块）。注意：AppModule 和 TestBed.configureTestingModule 中引用的模块会被保留，需后续手动处理。

切换主入口为 standalone 引导方式
第三次执行：

ng generate @angular/core:standalone

选择：Bootstrap the project using standalone APIs

此步会重写 main.ts，将传统的 platformBrowserDynamic().bootstrapModule(AppModule) 替换为：
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig) .catch(err => console.error(err));

同时生成 `app.config.ts`（含 `providers` 配置），并将原 `AppModule` 中的 `providers`、`imports`（如 `BrowserModule`, `FormsModule`）迁移至此。

校验、修复与提交
运行代码质量检查：
```
ng lint && ng format
```
修复所有报错（常见问题包括：
- 某些第三方库仍依赖 NgModule（需查阅其 v16+/v17+ standalone 兼容文档）；
- 动态组件加载（ComponentFactoryResolver）需改用 ViewContainerRef.createComponent()；
- 路由守卫/解析器若在 NgModule 中提供，需显式添加到 appConfig.providers；
- 测试文件中 TestBed.configureTestingModule({}) 应替换为 TestBed.configureTestingModule({ providers: [...] }) 或直接使用 TestBed.runInInjectionContext()）。
  确认无误后提交本次迁移变更。

⚠️ 最后关键步骤：手动清理残留 NgModule

迁移工具不会自动删除所有模块类——尤其是 AppModule 本身（因它可能被测试或 e2e 引用）。请在确认主应用完全稳定后，手动删除 AppModule 及其 .module.ts 文件，并更新所有相关引用（如测试中的 imports: [AppModule] 改为显式 providers 列表）。此外，检查 angular.json 中 test 配置的 karma.conf.js 或 jest.preset.js 是否仍引用旧模块路径，一并修正。

完成上述流程后，你的项目即成为 100% standalone 架构，不仅符合 Angular 当前设计范式，也为无缝升级至 Angular 17（及后续版本）扫清了核心障碍。建议将此迁移过程纳入 CI 流水线，在每次 PR 中强制执行 ng build --configuration production 验证，确保架构演进稳健可靠。