OpenProject中BrowserModule重复加载错误修复求助

核心问题分析 #

控制台报错Providers from the BrowserModule have already been loaded的本质是：Angular的BrowserModule只能在根模块（如AppModule）中导入一次，你的特性模块OpenprojectBoardsModule错误地导入了BrowserModule，导致全局提供者重复注册，进而引发组件渲染失败（页面空白）。

修复步骤 #

1. 替换OpenprojectBoards.module.ts中的BrowserModule
   打开你的OpenprojectBoards.module.ts文件，找到imports数组，将其中的BrowserModule替换为CommonModule。CommonModule包含了NgIf、NgFor等常用指令，完全满足特性模块的需求，且不会触发重复加载问题。

   修正后的模块示例：

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';
   import { BoardsComponent } from './path/to/boards.component';
   
   @NgModule({
     declarations: [BoardsComponent],
     imports: [CommonModule], // 用CommonModule替代BrowserModule
     exports: [BoardsComponent]
   })
   export class OpenprojectBoardsModule { }
   

2. 确认模块与组件的关联正确性

   • 确保BoardsComponent已在OpenprojectBoardsModule的declarations数组中声明
   • 检查global-dynamic-components.const.ts中注册的组件路径是否指向该模块下的正确组件文件

3. 清理缓存并重启服务

   • 执行依赖清理命令：

     npm clean-install
     

   • 重启OpenProject的开发服务，确保模块变更完全生效

验证结果 #

重启后访问Boards页面，控制台应不再出现重复加载的报错，页面能正常渲染组件内容。

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