angular - 尝试导入插件之前的完整日历库
问题描述
我在 Angular 9 项目中安装了 FullCalendar 5
然后我在浏览器的控制台中收到此错误,页面中出现任何内容
vdom.js:3 Uncaught Error: Please import the top-level full calendar lib before attempting to import a plugin.
at Module../node_modules/@fullcalendar/common/vdom.js (vdom.js:3)
at __webpack_require__ (bootstrap:79)
at Module../node_modules/@fullcalendar/common/main.js (main.js:1)
at __webpack_require__ (bootstrap:79)
at Module../node_modules/@fullcalendar/daygrid/main.js (main.js:1)
at __webpack_require__ (bootstrap:79)
at Module../src/app/demo/demo.component.ts (demo.component.ts:1)
at __webpack_require__ (bootstrap:79)
at Module../src/app/Modules/app-routing.module.ts (app-routing.module.ts:1)
at __webpack_require__ (bootstrap:79)
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular'; // for FullCalendar!
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FullCalendarModule // for FullCalendar!
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
calendarOptions = {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth'
};
}
<full-calendar [options]="calendarOptions"></full-calendar>
解决方案
要解决此问题,您需要在顶部导入日历核心库,然后您需要像这样在构造函数中初始化核心库
import { Component } from '@angular/core';
import { Calendar } from '@fullcalendar/core'; // include this line
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
calendarOptions = {
plugins: [dayGridPlugin],
initialView: 'dayGridMonth'
};
constructor() {
const name = Calendar.name; // add this line in your constructor
}
}
推荐阅读
- ios - 确定集合视图中的滚动位置
- c# - 使用 await 将元素添加到数据库 C# 时出错
- excel - Excel JavaScript API 文件系统交互、系统调用和 API 调用?
- java - 时间选择器使我的应用程序崩溃并出现错误:E/libprocessgroup: failed to make and chown /acct/uid_10058: Read-only file system
- amazon-web-services - AWS Redshift DB 用户名验证约束是否发生了变化?
- php - 从调整后的复选框中获取数据到 codeigniter 控制器
- python - 如何从 kivy 屏幕收集数据,保存它们并将条形图绘制到输出可打印屏幕中
- neo4j - 节点属性显示不正确
- jquery - 使用来自输入的文件发送 Ajax 请求
- c# - 如何从 WPF 页面触发 KeyDown 事件