fullcalendar& amp;角5 [英] fullcalendar & Angular 5
问题描述
如何在Angular 5中正确实现fullcalendar而没有任何错误？我正在尝试将其实施到特定组件中。我安装了以下软件包
- jquery
- 时刻
- fullcalendar
fullcalendar-scheduler
$ b $ hr
仅供参考，下面的帖子是我找到最接近的解决方案。我遵循指示，但我仍然得到'JQueryPromise'错误。请告知&在此先感谢！
package.json
fullcalendar：^ 3.8.0，
fullcalendar-scheduler：^ 1.9.1，
jquery ：^ 3.2.1，
moment：^ 2.20.1，
.angular-cli.json
样式：[
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 *作为jQuery从jquery;
（任何窗口）。$ =（窗口任意）.jQuery = jQuery;
app.component.html
< div id ='calendar'>< / div>
app.component.ts
从'@ angular / core'导入{Component};
导入'fullcalendar';
导入'fullcalendar-scheduler';
声明让$：any;
$ b @Component（{
选择器：'app-root'，
templateUrl：'./app.component.html'，
styleUrls：['./ app.component.css']
}）
export class AppComponent {
ngOnInit（）{
$（'＃calendar'）。fullCalendar（{}）;
我遵循所有步骤，但我仍然出错。具有讽刺意味的是，它可以在我刷新页面时加载，并且可以避开那个错误，但它仍然存在，特别是当我第一次运行'ng serve'时
node_modules / fullcalendar / dist / fullcalendar.d.ts中的错误（695,36）：错误TS2304：找不到名称'JQueryPromise'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（696,29）：错误TS2304：无法找到名称'JQueryPromise'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（697,20）：错误TS2304：无法找到名称'JQueryPromise'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（759,22）：错误TS2304：找不到名称'JQueryPromise'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（775,50）：错误TS2304：无法找到名称'JQueryPromise'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（988,23）：错误TS2304：找不到名称'JQueryEventObject'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（1401,70）：错误TS2304：找不到名称'JQueryAjaxSettings'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（1603,50）：错误TS2304：找不到名称'JQueryPromise'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（1623,50）：错误TS2304：找不到名称'JQueryPromise'。
node_modules / fullcalendar / dist / fullcalendar.d.ts（2588,50）：错误TS2304：找不到名称'JQueryPromise'。
这个兔子洞
刚刚尝试创建一个新组件schedule.component并将所有内容移动到那里，但现在我得到以下错误
拒绝加载字体数据：字体/ WOFF; BASE64，d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC4AAAA0ArgC7UdQT1MAAAGwAAAQ6AAALgxKsqRTR1NVQgAAEpgAAAH3AAAELqI5y + RPUy8yAAAUkAAAAE8AAABgaGyBu2NtYXAAABTgAAABlAAAAkQkRATXY3Z0IAAAFnQAAABeAAAAugDsQf1mcGdtAAAW1AAABZcAAAvNb3 / BHGdhc3AAABxsAAAACAAAAAgAAAAQZ2x5ZgAAHHQAAEApAAB3CtbiupxoZWFkAABcoAAAADYAAAA2BkubWWhoZWEAAFzYAAAAIAAAACQHFARfaG10eAAAXPgAAAI6AAAEEk4TN4Nsb2NhAABfNAAAAhIAAAISiLhpam1heHAAAGFIAAAAIAAAACACigzgbmFtZQAAYWgAAACUAAABHhQGLdJwb3N0AABh / AAAAq4AAASRk5y6n3ByZ ... QxUajCCFt4p9HP4fzdSWs2XhWl5HvJazrIrFUyB0l5dpqcW10lV2wukjMLuAvyMHNiYpgPsrCVXZDKrkpll6UWkh7kABVAFVCDe7UFmxagDegA + hLHRPbqtMo7ZHCpKdT6tPGXybzo0 + RXBLoPZt1tELcXxCmAA yZwYTJvdDFZKnDER44X2451rDqCyunIsRWvLSx6wnWqwPj / uX5 / KuEy6DL0z6A / Fn79VihxMFJsrlAFy4DpZOcvNlMeNp + BRDLj0r + XFdRxdSNSNxiI / AL3ojKdAAB4AWPw3sFwIihiIyNjX + QGxp0cDBwMyQUbGdictkUwWDAwsDJogTgOPN4c9iz6bMos4iysHFChUDZXJnMWTSZZJrAQt9M + YQYBBh4GTgY2kEZOoJiA0z4GBxiEiDEzuGxUYewIjNjg0BGxkTnFZaMaiLeLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU =，因为它违反了以下内容安全政策指令：默认-src的自我。请注意，'font-src'没有明确设置，所以'default-src'被用作后备。
解决方案你提出的GitHub问题。
我相信运行
npm install --save-dev @ types / jquery会正确解决这个问题，因为我有遇到同样的问题，并运行这个技巧（在我发现这篇文章和GitHub问题的链接后）。
引用GitHub上的修复：this现在在文档中进行了说明： https://fullcalendar.io/docs/typescript/
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
- 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!
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({}); } }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'
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
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.解决方案The issue you were having has now been fixed thanks to the GitHub issue you raised.
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).to quote the fix on GitHub: "this is now accounted for in the docs: https://fullcalendar.io/docs/typescript/"
这篇关于fullcalendar& amp;角5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
