带有 ng-fullcalendar 包装器和角度 5 中的 fullcalendar-scheduler 扩展的 fullcalendar 标题中的“未定义”答案

【问题标题】：'Undefined' in the title of fullcalendar with the ng-fullcalendar wrapper and the fullcalendar-scheduler extention in angular 5带有 ng-fullcalendar 包装器和角度 5 中的 fullcalendar-scheduler 扩展的 fullcalendar 标题中的“未定义”
【发布时间】：2019-05-28 02:22:24
【问题描述】：

我在我的 Angular 5 项目中为 fullcalendar 小部件使用 ng-fullcalender 包装器。没有 fullcalendar-scheduler 插件的 fullcalendar 可以正常工作。但是当我尝试使用 fullcalendar-scheduler 插件扩展日历时，小部件的标题中会出现几个“未定义”字符串。

我正在将 fullcalendar-scheduler 插件导入我要使用该插件的组件中。我在项目的不同位置使用 ng-fullcalendar 组件。奇怪的是，当我只在一个组件中导入 fullcalendar-scheduler 插件时，所描述的行为出现在整个项目中的每个 fullcalenar 元素中。我还尝试在“脚本”部分的“.angular-cli.json”中导入 fullcalendar-scheduler 插件。但随后 chrome 控制台显示：“未捕获的 TypeError：无法读取未定义的属性 'Mixin'”。它还显示 "ERROR TypeError: spec.class is not a constructor"，当 fullcalendar-scheduler 插件未加载时，它总是显示。我已经阅读了以下帖子：jQuery fullCalendar displayed undefined on title。但是他们的建议都没有解决我的问题，因为 ng-fullcalendar 组件正在导入 fullcalendar 而不是我。他们还建议包含 moment 包，但正如您在我的示例中看到的那样，这也没有效果。

我已经使用 stackblitz 中描述的行为设置了我的配置：https://stackblitz.com/edit/angular-vjydy4。

【问题讨论】：

标签： angular fullcalendar fullcalendar-scheduler

【解决方案1】：

我已经解决了这个问题（两天后）：我怀疑加载完整日历时出现问题。所以我根据 ng-fullcalendar 的源代码创建了自己的包装器。使用我项目中的包装器，我现在可以完全控制单个 js 文件的加载。而不是导入全日历

import * as $ from 'jquery';
import 'fullcalendar';

仅导入全日历调度程序

import * as $ from 'jquery';
import 'fullcalendar-scheduler';

在包装器中解决了问题。

您还必须在 .angular-cli.json 中添加以下内容：

 "styles": [
    "styles.scss",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/fullcalendar-scheduler/node_modules/fullcalendar/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
 ],

在你的 style.css 中你必须包含 fullcalendar 的 css：

@import "~fullcalendar/dist/fullcalendar.min.css";

然后一切都对我有利。

【讨论】：