升级到Angular 14+后如何移除@NgModule与app.module.ts文件？

一、移除NgModule时的核心优化步骤 #

• 梳理组件依赖：逐个检查原NgModule中声明的组件、指令、管道，将它们的依赖（如其他组件、第三方库、基础指令集）直接移到对应组件的imports数组中。比如原模块里导入的CommonModule，要加到每个用到*ngIf/*ngFor的组件的imports里。
• 迁移服务注入：原NgModule的providers数组内的服务，要么移到组件的providers（仅组件树范围内使用），要么改用providedIn: 'root'标记为全局服务，避免重复注入导致的资源浪费。
• 重构路由配置：如果有独立的路由模块（如AppRoutingModule），可将路由配置直接合并到bootstrapApplication的providers中，用provideRouter导入路由数组，无需保留路由模块文件。
• 替换模块式全局依赖：原NgModule中imports里的全局功能模块（如BrowserAnimationsModule），改用对应的提供者函数（如provideAnimations()）加到bootstrapApplication的配置中；全局样式直接在angular.json或index.html中引入即可。
• 验证组件独立性：确保每个组件能独立编译运行，无未声明的依赖项。通过ng build或ng serve排查报错，逐个修复缺失的导入或提供者配置。

二、移除app.module.ts后的其他模块变更处理 #

• 拆解功能模块：原有的功能模块（如UserModule、ProductModule）直接拆分为独立组件集合。模块内的declarations组件转为独立组件，模块的imports依赖分别移到每个组件的imports中，模块的providers按服务作用域迁移到组件或设为全局。
• 替代共享模块：原共享模块（如SharedModule）中的通用组件、指令、管道，改为单独的独立组件/指令/管道，在需要使用的组件中直接导入；若有大量通用依赖，可创建shared-providers.ts文件，将常用提供者（如provideHttpClient()）封装成数组，方便组件统一导入。
• 调整懒加载路由：原模块级的懒加载配置（如loadChildren: () => import('./user/user.module').then(m => m.UserModule)），改为直接懒加载组件：loadComponent: () => import('./user/user.component').then(c => c.UserComponent)，无需保留模块文件。
• 清理冗余文件：删除所有废弃的.module.ts文件及对应的测试文件（如user.module.spec.ts），同时检查angular.json和tsconfig.json中引用这些模块的配置，一并清理。

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