Angular 9集成FullCalendar执行ng serve报错求助

问题描述 #

我尝试在Angular 9中使用FullCalendar库开发日历组件，但执行ng serve命令时运行失败，返回大量错误信息，以下是相关代码及错误日志：

代码文件 #

1. app.module.ts #

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

//calendar 
import { FullCalendarModule } from '@fullcalendar/angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FullCalendarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. app.component.ts #

import { Component, OnInit } from '@angular/core';

//calendar
import { CalendarOptions } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'calendar';

  constructor(){}

  ngOnInit(): void {

  }

  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    weekends: false,
    events: [
      { title: 'Meeting', start: new Date() }
    ]
  };
}

3. app.component.html #

<full-calendar [options]="calendarOptions">
  <ng-template #eventContent let-arg>
    <b>{{arg.timeText}}</b>
    <i>{{arg.event.title}}</i>
  </ng-template>
</full-calendar>

错误日志 #

ERROR in node_modules/preact/src/jsx.d.ts:2138:24 - error TS2304: Cannot find name 'SVGMPathElement'.

2138    mpath: SVGAttributes<SVGMPathElement>;
                             ~~~~~~~~~~~~~~~
node_modules/preact/src/jsx.d.ts:2145:22 - error TS2304: Cannot find name 'SVGSetElement'.

2145    set: SVGAttributes<SVGSetElement>;
                           ~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/full-calendar.component.d.ts:46:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵFactoryDeclaration'.

46     static ɵfac: i0.ɵɵFactoryDeclaration<FullCalendarComponent, never>;
                       ~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/full-calendar.component.d.ts:47:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵComponentDeclaration'.

47     static ɵcmp: i0.ɵɵComponentDeclaration<FullCalendarComponent, "full-calendar", never, { "options": "options"; "deepChangeDetection": "deepChangeDetection"; "events": "events"; "eventSources": "eventSources"; "resources": "resources"; }, {}, ["dayHeaderContent", "dayCellContent", "weekNumberContent", "nowIndicatorContent", "eventContent", "slotLaneContent", "slotLabelContent", "allDayContent", "moreLinkContent", "noEventsContent", "resourceAreaHeaderContent", "resourceGroupLabelContent", "resourceLabelContent", "resourceLaneContent", "resourceGroupLaneContent"], never>;
                       ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/utils/offscreen-fragment.component.d.ts:8:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵFactoryDeclaration'.

8     static ɵfac: i0.ɵɵFactoryDeclaration<OffscreenFragmentComponent, never>;
                      ~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/utils/offscreen-fragment.component.d.ts:9:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵComponentDeclaration'.

9     static ɵcmp: i0.ɵɵComponentDeclaration<OffscreenFragmentComponent, "offscreen-fragment", never, {}, {}, never, ["*"]>;
                      ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/utils/transport-container.component.d.ts:16:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵFactoryDeclaration'.

16     static ɵfac: i0.ɵɵFactoryDeclaration<TransportContainerComponent, never>;
                       ~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/utils/transport-container.component.d.ts:17:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵComponentDeclaration'.

17     static ɵcmp: i0.ɵɵComponentDeclaration<TransportContainerComponent, "transport-container", never, { "inPlaceOf": "inPlaceOf"; "reportEl": "reportEl"; "elTag": "elTag"; "elClasses": "elClasses"; "elStyle": "elStyle"; "elAttrs": "elAttrs"; "template": "template"; "renderProps": "renderProps" }, {}, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/full-calendar.module.d.ts:7:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵFactoryDeclaration'.

7     static ɵfac: i0.ɵɵFactoryDeclaration<FullCalendarModule, never>;
                      ~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/full-calendar.module.d.ts:8:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵNgModuleDeclaration'.

8     static ɵmod: i0.ɵɵNgModuleDeclaration<FullCalendarModule, [typeof i1.FullCalendarComponent, typeof i2.OffscreenFragmentComponent, typeof i3.TransportContainerComponent], [typeof i4.CommonModule], [typeof i1.FullCalendarComponent]>;
                      ~~~~~~~~~~~~~~~~~~~~~
node_modules/@fullcalendar/angular/full-calendar.module.d.ts:9:21 - error TS2694: Namespace "C:/Users/michael.brunco/Desktop/Calendar_angular_9/calendar/node_modules/@angular/core/core" has no exported member 'ɵɵInjectorDeclaration'.

9     static ɵinj: i0.ɵɵInjectorDeclaration<FullCalendarModule>;
                      ~~~~~~~~~~~~~~~~~~~~~

解决方案 #

1. 修复版本不匹配问题（核心） #

你安装的@fullcalendar/angular版本过高，与Angular 9不兼容。Angular 9对应的FullCalendar Angular适配器需使用v5.x版本，更高版本依赖Angular 10+才有的内部API（比如ɵɵFactoryDeclaration）。

执行命令降级相关包：

npm uninstall @fullcalendar/angular @fullcalendar/core @fullcalendar/daygrid
npm install @fullcalendar/angular@5.11.3 @fullcalendar/core@5.11.3 @fullcalendar/daygrid@5.11.3

2. 解决TypeScript SVG类型缺失 #

针对SVGMPathElement和SVGSetElement找不到的错误，修改tsconfig.json的lib配置：

{
  "compilerOptions": {
    "lib": [
      "es2015",
      "dom",
      "DOM.Iterable"
    ]
  }
}

3. 重新验证运行 #

删除旧依赖文件后重新安装：

rm -rf node_modules package-lock.json
npm install

再执行ng serve即可正常启动项目。

内容的提问来源于stack exchange，提问作者jr full stack developer