Angular 14引入@fullcalendar/angular依赖时编译报错如何解决

两个编译错误的核心原因是当前安装的@fullcalendar/angular版本与Angular 14版本不兼容：

• 你安装的是适配Angular 12及更低版本的FullCalendar v5及更早版本，该版本的组件类型定义按照旧版Angular的ɵɵComponentDeclaration泛型规则编写，Angular 14中该泛型要求传入7个类型参数，直接触发TS类型校验报错。
• 旧版本FullCalendar的CSS资源导出逻辑未适配Angular 14内置的webpack构建规则，没有对应loader处理其导出的全局CSS文件，触发模块解析失败错误。
• 你提到的SCSS配置与本次报错没有关联。

• 先卸载所有不兼容的FullCalendar相关依赖，在项目根目录执行命令：
  npm uninstall @fullcalendar/angular @fullcalendar/common @fullcalendar/interaction @fullcalendar/daygrid
• 安装官方适配Angular 14的FullCalendar v6稳定版本（v6.1.x版本线全量兼容Angular 14），执行命令：
  npm install @fullcalendar/angular@6.1.15 @fullcalendar/core@6.1.15 @fullcalendar/interaction@6.1.15 @fullcalendar/daygrid@6.1.15
• 调整代码适配v6版本API：
  1. 删除App.module.ts中原有的FullCalendarModule.registerPlugins()全局注册插件代码，v6版本废弃了该用法，模块配置仅需正常导入FullCalendarModule即可，参考正确配置：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { HttpClientModule } from '@angular/common/http';
  import { FullCalendarModule } from '@fullcalendar/angular';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      AppRoutingModule,
      FullCalendarModule,
      HttpClientModule    
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

  2. 在使用日历的业务组件内，通过组件输入属性options传入要加载的插件和日历配置，参考示例：

  import { Component } from '@angular/core';
  import interactionPlugin from '@fullcalendar/interaction';
  import dayGridPlugin from '@fullcalendar/daygrid';
  
  @Component({
    selector: 'app-root',
    template: `<full-calendar [options]="calendarOptions"></full-calendar>`
  })
  export class AppComponent {
    calendarOptions = {
      plugins: [interactionPlugin, dayGridPlugin],
      initialView: 'dayGridMonth'
      // 事件数据、交互回调等其余配置均在此处添加
    };
  }
  

• SCSS场景适配（可选）：如果需要自定义日历样式，直接在全局styles.scss或对应组件的SCSS文件中引入官方样式即可，不会触发构建错误：

  @use '@fullcalendar/core/index.css';
  @use '@fullcalendar/daygrid/index.css';
  

完成以上操作后重新启动项目编译即可正常运行。

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