Angular懒加载模块使用FullCalendar组件的临时解决方法咨询

我在Angular项目里想在自定义懒加载模块中使用第三方组件FullCalendarComponent，这个组件声明在FullCalendarModule里，但该模块错误地引入了BrowserModule，导致只能在非懒加载模块正常使用，懒加载模块里会报如下错误：

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.

我已经在第三方项目的追踪器提交了问题，现在想知道有没有临时绕过的办法？

临时绕过方案 #

方案1：用共享模块封装FullCalendar #

• 新建一个非懒加载的共享模块（比如FullCalendarSharedModule）
• 在该共享模块中导入FullCalendarModule，并导出FullCalendarComponent
• 懒加载模块中仅导入这个共享模块，不直接导入FullCalendarModule
• 核心逻辑：让BrowserModule仅在应用启动时通过共享模块加载一次，懒加载模块通过共享模块间接使用组件，避免重复加载冲突

方案2：动态加载组件 #

• 在懒加载模块中通过ComponentFactoryResolver动态创建FullCalendarComponent实例：
  1. Angular 9+（Ivy启用）无需配置entryComponents，旧版本需在模块中声明FullCalendarComponent为entryComponents
  2. 在目标组件中注入ComponentFactoryResolver和ViewContainerRef
  3. 通过代码创建组件：

     import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
     import { FullCalendarComponent } from '@fullcalendar/angular';
     
     // 在组件类中
     constructor(
       private resolver: ComponentFactoryResolver,
       private viewContainerRef: ViewContainerRef
     ) {}
     
     ngOnInit() {
       const factory = this.resolver.resolveComponentFactory(FullCalendarComponent);
       const componentRef = this.viewContainerRef.createComponent(factory);
       // 手动绑定输入输出，比如：
       // componentRef.instance.events = yourEvents;
     }
     

  4. 组件销毁时记得调用componentRef.destroy()清理资源

方案3：给第三方模块打补丁（应急用） #

• 找到node_modules中FullCalendarModule的源码，将其中的BrowserModule替换为CommonModule
• 用patch-package工具固化补丁，避免每次安装依赖重复修改：
  1. 安装依赖：npm install patch-package --save-dev
  2. 修改node_modules/@fullcalendar/angular/fullcalendar.module.ts（路径可能略有不同），替换import { BrowserModule } from '@angular/platform-browser';为import { CommonModule } from '@angular/common';，并修改imports数组中的BrowserModule为CommonModule
  3. 执行命令生成补丁：npx patch-package fullcalendar-angular
  4. 在package.json的scripts中添加"postinstall": "patch-package"，确保每次npm install后自动应用补丁

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