fullcalendar＆Angular 5 https://fullcalendar.io/docs/angular @Alpha发布

Question

(New New Edit)

Rustam帮助Arshaw构建了一个非常棒的Angular模块！看看这个。适用于Angular 7。

https://fullcalendar.io/docs/angular

(New Edit)

I implemented Angluar 5 with FullCalendar @Alpha Release.

我之前在向Angular实现FullCalendar时遇到了问题。我以为你们可能也想要更新。

---

如何正确实现Angular 5的fullcalendar而没有任何错误？我正在尝试将其实现为特定组件。我安装了以下软件包

• jQuery的
• 时刻
• fullcalendar
• fullcalendar调度

---

仅供参考，以下帖子是我找到解决方案的最接近的帖子。我按照说明操作，但我仍然得到'JQueryPromise'错误。请提前通知并表示感谢！

Callback angular function from jquery event

的package.json

 "fullcalendar": "^3.8.0",
 "fullcalendar-scheduler": "^1.9.1",
 "jquery": "^3.2.1",
 "moment": "^2.20.1",

.angular-cli.json

 "styles": [
    "styles.css",
    "../node_modules/fullcalendar/dist/fullcalendar.min.css",
    "../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/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
  ],

main.ts

import * as jQuery from "jquery";
(window as any).$ = (window as any).jQuery = jQuery;

app.component.html

<div id='calendar'></div>

app.component.ts

import { Component } from '@angular/core';
import 'fullcalendar';
import 'fullcalendar-scheduler';
declare let $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ngOnInit() {
    $('#calendar').fullCalendar({});
  }
}

我顺着所有的步骤，但我仍然得到错误。具有讽刺意味的是，它可以在刷新页面时加载，我可以解决该错误，但它仍然存在，特别是当我第一次运行'ng serve'时

ERROR in node_modules/fullcalendar/dist/fullcalendar.d.ts(695,36): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(696,29): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(697,20): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(759,22): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(775,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(988,23): error TS2304: Cannot find name 'JQueryEventObject'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1401,70): error TS2304: Cannot find name 'JQueryAjaxSettings'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1603,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(1623,50): error TS2304: Cannot find name 'JQueryPromise'.
node_modules/fullcalendar/dist/fullcalendar.d.ts(2588,50): error TS2304: Cannot find name 'JQueryPromise'.

---

这个兔子洞的新发展

刚尝试创建一个新组件“schedule.component”并将所有内容移动到那里，但现在我收到以下错误

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y+RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3/BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh/AAAAq4AAASRk5y6n3ByZ...QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA+hLHRPbqtMo7ZHCpKdT6tPGXybzo0+RXBLoPZt1tELcXxCmAAyZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj/uX5/KuEy6DL0z6A/Fn79VihxMFJsrlAFy4DpZOcvNlMeNp+BRDLj0r+XFdRxdSNSNxiI/AL3ojKdAAB4AWPw3sFwIihiIyNjX+QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M+YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

Answer 1

由于您提出的GitHub问题，您现在遇到的问题已得到解决。

我相信运行npm install --save-dev @types/jquery将正确解决这个问题，因为我遇到了同样的问题，并运行这个做了伎俩（在我找到这篇文章和GitHub问题的链接后）。

引用GitHub上的修复：“现在在文档中说明了这个问题：https://fullcalendar.io/docs/typescript/”

Answer 2

所以似乎node_modules文件夹中的* .d.ts文件有问题。我在GitHub项目中打开了一个问题

https://github.com/fullcalendar/fullcalendar/issues/3991

我用'any'替换了相应的问题类型：

node_modules / fullcalendar / DIST / fullcalendar.d.ts node_modules / fullcalendar调度器/ DIST / scheduler.d.ts

'JQueryPromise' 'JQueryEventObject' 'JQueryAjaxSettings'

具有讽刺意味的是，在修复后我不再有“拒绝加载字体”问题。无法评论那一个。我所知道的是，它的工作正常。

节日快乐！

Answer 3

您的项目不包含jquery类型。尝试使用此命令添加它们

npm install --save-dev @types/[email protected]

此问题已在完整日历问题跟踪器（https://github.com/fullcalendar/fullcalendar/issues/3991）上提出

Answer 4

嗨，我知道这是一个老问题，但这个npm install --save-dev @types/jquery不适合我。更快的解决方案是：

• 在Tools>NuGet Package Manager> Manage NuGet Packages for Solution打开Manage NuGet Packages for Solution（Package Manager的可视选项）
• 写在搜索框中：jquery.type
• 找到jquery.TypeScript.DefinitelyTyped包
• 在Web项目中安装
• 解决了

我希望这可能会帮助那些与我情况相同的人。