typescript 全日历和 Angular 5

fullcalendar & Angular 5

提问by Jose

(New New Edit)

（新新编辑）

Rustam has helped Arshaw build an Angular module that is awesome! Check it out. Works with Angular 7.

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

https://fullcalendar.io/docs/angular

https://fullcalendar.io/docs/angular

(New Edit)

（新编辑）

I implemented Angluar 5 with FullCalendar @Alpha Release.

我使用 FullCalendar @Alpha Release实现了 Angluar 5 。

I was previously having issues implementing FullCalendar to Angular below. I thought you guys might want an update as well.

我以前在下面将 FullCalendar 实施到 Angular 时遇到了问题。我想你们可能也想要更新。

---

---

How can I properly implement fullcalendar with Angular 5 without any errors? I am trying to implement it into a specific component. I installed the following packages

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

• jquery
• moment
• fullcalendar
• fullcalendar-scheduler

• 查询
• 片刻
• 全日历
• 全日历调度器

---

---

FYI, the post below is the closest that I've come to finding a solution. I followed the instruction, but I still get that 'JQueryPromise' error. Please advise & thanks in advance!

仅供参考，下面的帖子是我找到解决方案最接近的帖子。我按照说明操作，但我仍然收到“JQueryPromise”错误。请提前告知并致谢！

Callback angular function from jquery event

从 jquery 事件回调角度函数

package.json

包.json

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

.angular-cli.json

.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

应用程序组件.html

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

app.component.ts

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({});
  }
}

I followed all the steps religously, but I am still getting error. Ironically, it is able to load when I refresh the page and I can get around that error, but it still persists, especially when I first run 'ng serve'

我虔诚地遵循了所有步骤，但仍然出现错误。具有讽刺意味的是，当我刷新页面时它能够加载并且我可以解决该错误，但它仍然存在，尤其是当我第一次运行“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'.

---

---

New development down this rabbit hole

这个兔子洞的新发展

Just tried creating a new component "schedule.component" and move everything there, but now I'm getting the following errors

刚刚尝试创建一个新组件“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.

采纳答案by Andrew Stalker

The issue you were having has now been fixed thanks to the GitHub issue you raised.

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

I believe running npm install --save-dev @types/jquerywill correctly fix this issue as i have encountered the same problem, and running this did the trick (after i found this post and the link to the GitHub issue).

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

to quote the fix on GitHub: "this is now accounted for in the docs: https://fullcalendar.io/docs/typescript/"

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

回答by T3X

Hi I know that it is an old question but this npm install --save-dev @types/jquerydoesn't worked for me. The faster solution was:

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

• Open the Manage NuGet Packages for Solution (The visual option of Package Manager) at Tools>NuGet Package Manager> Manage NuGet Packages for Solution
• Write in the search box: jquery.type
• Find jquery.TypeScript.DefinitelyTyped package
• Install inside your Web project
• Solved

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

I hope this may have helped those who were in the same situation as me.

我希望这可以帮助那些与我处于相同情况的人。

回答by Jose

So it seems as though there is something wrong in the *.d.ts files in the node_modules folder. I've opened an issue in the GitHub project

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

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

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

I went into the replaced the corresponding issues type with 'any':

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

node_modules/fullcalendar/dist/fullcalendar.d.ts
node_modules/fullcalendar-scheduler/dist/scheduler.d.ts

node_modules/fullcalendar/dist/fullcalendar.d.ts
node_modules/fullcalendar-scheduler/dist/scheduler.d.ts

'JQueryPromise'
'JQueryEventObject'
'JQueryAjaxSettings'

'JQueryPromise'
'JQueryEventObject'
'JQueryAjaxSettings'

Ironically, after fixing that I am no longer having the "Refuse to load font" issue either. Cannot comment on that one. All I know is that it's working as it should.

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

Happy holidays!

节日快乐！

回答by David G.

Your project doesn't contains jquery typings. Try to add them using this command

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

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

This issue has been raised on full calendar issue tracker (https://github.com/fullcalendar/fullcalendar/issues/3991)

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