将 Angular 项目迁移至完全独立（Standalone）模式的完整指南-js教程-PHP中文网

将 Angular 项目迁移至完全独立（Standalone）模式的完整指南

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

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

Angular 自 v14 起正式支持 standalone 组件、指令和管道，而 v15 引入了 bootstrapApplication() 和完整的 standalone 应用启动能力。从 Angular 16 开始，CLI 提供了官方、可复现的迁移工具链，帮助开发者系统性地将传统 NgModule-驱动的项目重构为纯 standalone 架构——这不仅是架构现代化的必要步骤，更是顺利升级至 Angular 17（已默认推荐 standalone 模式）的前提。

✅ 推荐迁移流程（四步渐进式）

请严格按顺序执行以下命令，并每次执行后验证应用能否成功构建与运行（ng build + ng serve），确保增量变更可控：

转换所有可独立的声明项
```
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
✅ 工具会识别并删除仅用于声明/导出、且无路由配置、无服务提供（providers）、无 forRoot() 等逻辑的空或轻量 NgModule（如 SharedModule、CoreModule）。⚠️ 注意：含 RouterModule.forChild() 的特性模块、含 provideXxx() 的服务注册模块需手动评估保留。

切换至 standalone 启动方式
第三次执行：

ng generate @angular/core:standalone

选择：
➤ Bootstrap the project using standalone APIs
✅ 此步将重写 main.ts：

// 替换前（NgModule 启动）
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

// 替换后（Standalone 启动）
bootstrapApplication(AppComponent, {
  providers: [
    // 原 AppModule 中的 providers 将被自动提取至此
    importProvidersFrom(BrowserModule, HttpClientModule),
    // 其他全局 provider...
  ]
}).catch(err => console.error(err));

同时自动移除 AppModule 及其引用。

代码校验与收尾清理
- 运行 ng lint / ng format（若启用 Prettier），修复所有提示问题；
- 手动删除残留的、已无任何用途的 NgModule 文件（如 AppModule.ts、SharedModule.ts），并检查 tsconfig.json 中是否仍存在未使用的路径别名；
- 更新路由配置：确保 app.config.ts（或 main.ts 中）使用 withRouterConfig() 或直接传入 provideRouter(routes)；
- 验证懒加载：特性路由应改用 loadComponent: () => import('./...').then(m => m.MyComponent)，而非 loadChildren: () => import('./...').then(m => m.MyModule)。

⚠️ 注意事项与常见问题

服务注入：原 NgModule 中的 providers: [{ provide: X, useClass: Y }] 会被自动迁移到 bootstrapApplication 的 providers 数组或组件级 providers 中，请检查是否需调整作用域（如 providedIn: 'root' 保持全局，providers: [...] 在组件内则为局部）。
第三方库兼容性：部分旧版 UI 库（如早期 ng-zorro、ngx-bootstrap）可能尚未适配 standalone 模式，建议升级至最新版本或查阅其 standalone 迁移文档。
测试文件更新：TestBed.configureTestingModule({}) 需替换为 TestBed.configureTestingModule({ imports: [...] }) 或直接使用 await render()（Angular Testing Library）。
CI/CD 影响：确认构建脚本中未硬编码 AppModule 相关路径；E2E 测试（如 Protractor 已弃用）建议迁移到 Cypress + @cypress/angular。

完成以上步骤后，你的项目即成为 100% standalone 架构，零 NgModule 依赖，结构更扁平、启动更快、Tree-shaking 更彻底——此时可放心执行 ng update @angular/core@17 @angular/cli@17 进行最终升级。迁移不是一蹴而就，但借助 Angular 官方工具链，它已变得高度自动化、低风险且可验证。