angular - 如何在 Angular 项目中从 PrimeNg 正确安装 Fullcalendar？

Question

所以我已经按照这里的文档做了所有的事情。一旦我添加插件导入，我就会收到以下错误：

错误：node_modules/@fullcalendar/common/vdom.d.ts:2:21 - 错误 TS2304：找不到名称“FullCalendarVDom”。

我在网上搜索了答案，但没有任何帮助。以下是我认为可能与解决我的问题相关的项目的摘录。

包.json

"private": true,
  "dependencies": {
    "@angular/animations": "~11.0.4",
    "@angular/cdk": "^11.0.2",
    "@angular/common": "~11.0.4",
    "@angular/compiler": "~11.0.4",
    "@angular/core": "~11.0.4",
    "@angular/fire": "^6.1.4",
    "@angular/forms": "~11.0.4",
    "@angular/platform-browser": "~11.0.4",
    "@angular/platform-browser-dynamic": "~11.0.4",
    "@angular/router": "~11.0.4",
    
    "@fullcalendar/core": "^4.1.0",
    "@fullcalendar/daygrid": "^5.7.2",
    "@fullcalendar/interaction": "^5.7.2",
    "@fullcalendar/timegrid": "^5.7.2",

角.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "ostobuddy-dashboard-angular": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:component": {
                    "style": "scss",
                    "skipTests": true
                },
                "@schematics/angular:class": {
                    "skipTests": true
                },
                "@schematics/angular:directive": {
                    "skipTests": true
                },
                "@schematics/angular:guard": {
                    "skipTests": true
                },
                "@schematics/angular:interceptor": {
                    "skipTests": true
                },
                "@schematics/angular:module": {
                    "skipTests": true
                },
                "@schematics/angular:pipe": {
                    "skipTests": true
                },
                "@schematics/angular:service": {
                    "skipTests": true
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/global-zone",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/primeng/resources/primeng.min.css",
                            "node_modules/primeicons/primeicons.css",
                            "node_modules/primeflex/primeflex.css",
                            "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                            "src/styles.scss",
                            "node_modules/@fullcalendar/core/main.min.css",
                            "node_modules/@fullcalendar/daygrid/main.min.css",
                            "node_modules/@fullcalendar/timegrid/main.min.css"
                        ],
                        "scripts": [
                            "node_modules/chart.js/dist/Chart.js"
                        ]
                    },

我的.module.ts

@NgModule({
  declarations: [PodEditComponent, PodsTableComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    FullCalendarModule
  ]
})

my.component.ts （这是引发错误的部分）

import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

任何支持将不胜感激。谢谢

标签： angularfullcalendarprimeng