Angular 13升级至14报错：BrowserModule提供者已重复加载

问题背景 #

项目基于Angular 2+初始化，此前升级至Angular 13过程顺利，升级到Angular 14后，访问任意懒加载模块时抛出以下错误：

Error: Providers from the BrowserModule have already been loaded. If you need access to common directives such as NgIf and NgFor, import the CommonModule instead.

已完成的排查：

• SharedModule仅导入CommonModule，未引入BrowserModule
• AppModule仅单次导入BrowserModule和BrowserAnimationsModule，且已将SharedModule加入imports数组
• 懒加载模块（AccountingModule、GeneralModule等）均只导入CommonModule、SharedModule及自身路由模块

排查方向与解决方案 #

1. 第三方模块间接引入BrowserModule #

SharedModule中引入的第三方组件（如Kendo Components）可能存在内部错误导入BrowserModule的情况。Angular 14对模块重复提供的检测更为严格，此前版本未触发该错误。

• 处理方式：查阅第三方库官方文档，确认其模块是否适配特性模块导入（部分UI库会区分核心模块和浏览器模块，特性模块应导入核心版本）；若库本身存在问题，升级至兼容Angular 14的版本。

2. 动态路由修改导致模块重复加载 #

AppRoutingModule中通过RouteConfigLoadEnd事件调用addDynamicPath修改路由配置，该操作可能引发懒加载模块重复加载，间接触发BrowserModule重复提供错误。

• 处理方式：暂时注释掉router.events订阅代码，测试懒加载模块是否正常访问。若错误消失，需调整addDynamicPath逻辑，避免修改已加载路由配置导致重复初始化。

3. BrowserAnimationsModule的隐性重复导入 #

虽已在AppModule单次导入BrowserAnimationsModule，但第三方动画库或其他模块可能间接重复导入该模块。

• 处理方式：确认所有懒加载模块、SharedModule及第三方模块均未导入BrowserAnimationsModule；同时确保@angular/animations与@angular/core版本完全匹配。

4. 模块循环依赖 #

未展示的模块间可能存在循环导入（如SharedModule与某特性模块互相导入），循环依赖会导致模块重复初始化，触发错误。

• 处理方式：使用ng lint命令检测循环依赖，或手动梳理模块导入关系，移除循环引用。

5. 预加载策略冲突 #

当前使用PreloadAllModules预加载所有懒加载模块，Angular 14的预加载逻辑与旧版本存在差异，可能与动态路由逻辑冲突导致模块重复加载。

• 处理方式：暂时将预加载策略改为NoPreloading，测试错误是否消失。若有效，需调整预加载策略或动态路由实现方式。

验证步骤 #

1. 注释AppRoutingModule中的路由事件订阅代码，测试懒加载模块访问情况
2. 排查所有第三方模块的导入逻辑，确保未引入BrowserModule
3. 再次确认所有特性模块仅导入CommonModule、SharedModule及自身路由模块

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