Angular v14引入FullCalendar报Module parse failed错误如何解决

在Angular v14项目中添加FullCalendar组件，完成全部配置操作后出现编译报错。

现有配置 #

package.json 依赖配置 #

"@fullcalendar/angular": "^5.11.0",
"@fullcalendar/daygrid": "^5.11.0",
"@fullcalendar/interaction": "^5.11.0",

app.module.ts 配置代码 #

...
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

FullCalendarModule.registerPlugins([ // 注册FullCalendar插件
dayGridPlugin,
interactionPlugin
]);

imports:[
      ...
      FullCalendarModule
     ]

抛出的错误信息 #

Compiled with problems:X

ERROR in ./node_modules/@fullcalendar/common/main.css 4:0

Module parse failed: Unexpected token (4:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| /* classes attached to <body> */
| /* TODO: make fc-event selector work when calender in shadow DOM */
> .fc-not-allowed,
| .fc-not-allowed .fc-event { /* override events' custom cursors */
|   cursor: not-allowed;


ERROR in ./node_modules/@fullcalendar/daygrid/main.css 2:0

Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| 
> :root {
|   --fc-daygrid-event-dot-width: 8px;
| }

该报错由CSS解析规则不匹配导致：@fullcalendar/angular v5.x版本默认开启自动注入CSS逻辑，会直接引用node_modules路径下的CSS文件，而Angular14默认构建规则不会为node_modules内的第三方包CSS匹配对应的样式loader，最终触发解析失败。

可任选以下一种方案修复：

• 方案1：保留现有v5版本，调整配置
  1. 打开项目根目录的angular.json文件，找到构建配置路径projects -> [你的项目名] -> architect -> build -> options -> styles数组，手动添加FullCalendar相关样式文件路径：

  "styles": [
    "src/styles.css",
    "node_modules/@fullcalendar/common/main.css",
    "node_modules/@fullcalendar/daygrid/main.css",
    "node_modules/@fullcalendar/interaction/main.css"
  ],
  

  2. 修改app.module.ts中的插件注册逻辑，关闭自动注入CSS开关，避免重复触发错误的CSS解析流程：

  FullCalendarModule.registerPlugins([
    dayGridPlugin,
    interactionPlugin
  ], {
    autoInjectCss: false
  });
  

  3. 终止当前运行的本地服务，重新执行ng serve启动项目即可。
• 方案2：升级到适配Angular14的v6版本（推荐）
  @fullcalendar/angular v6.x版本原生适配Angular14及以上版本，重构了样式引入逻辑，从根源上避免这类loader解析错误：
  1. 将相关依赖升级到v6稳定版本：

  "@fullcalendar/angular": "^6.1.10",
  "@fullcalendar/daygrid": "^6.1.10",
  "@fullcalendar/interaction": "^6.1.10",
  

  2. 移除app.module.ts中FullCalendarModule.registerPlugins相关代码，v6版本无需全局注册插件，仅需在使用日历组件的业务组件中引入所需插件，传入组件的plugins输入属性即可。
  3. 参照方案1的步骤在angular.json的styles数组中引入对应插件的CSS文件，重启服务即可正常运行。

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