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

问题描述 投票:12回答:4

(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.
angular typescript fullcalendar fullcalendar-scheduler
4个回答
11
投票

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

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

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


0
投票

所以似乎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'

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

节日快乐!


0
投票

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

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

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


0
投票

嗨,我知道这是一个老问题,但这个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项目中安装
  • 解决了

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

© www.soinside.com 2019 - 2024. All rights reserved.