2017-12-23 13 views
4

Wie kann ich Fullcalendar mit Angular 5 korrekt und ohne Fehler implementieren? Ich versuche, es in eine bestimmte Komponente zu implementieren. Ich installierte die folgenden PaketeFullcalendar & Angular 5

  • jquery
  • Moment
  • fullcalendar
  • fullcalendar-Scheduler

FYI, unterhalb der Post ist die nächste, die ich gekommen bin zu finden, eine Lösung. Ich folgte der Anweisung, aber ich bekomme immer noch den Fehler 'JQueryPromise'. Bitte geben Sie & Danke im Voraus!

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

Ich habe alle Stufen religiös verfolgt, aber ich bekomme immer noch Fehler. Ironischerweise ist es in der Lage zu laden, wenn ich die Seite neu geladen und ich kann um diesen Fehler, aber es bleibt immer noch, vor allem, wenn ich zum ersten Mal nach unten diesem

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'. 

Neuentwicklung ‚ng diene‘ laufen Kaninchenbau

habe gerade versucht, eine neue Komponente „schedule.component“ zu schaffen und alles dort bewegen, aber jetzt die folgenden Fehler erhalte ich

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. 

Antwort

0

Es scheint also so, als ob in den * .d.ts-Dateien im Ordner node_modules etwas nicht stimmt.Ich habe ein Problem, bei dem Projekt GitHub geöffnet

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

Ich ging in die ersetzt die entsprechenden Fragen geben mit 'alle':

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


'JQueryPromise' 'JQueryEventObject'
'JQueryAjaxSettings'

Ironischerweise, nach der Fixierung, habe ich nicht mehr das Problem "Refuse to load font". Ich kann das nicht kommentieren. Alles, was ich weiß, ist, dass es so funktioniert, wie es sollte.

Frohe Feiertage!

2

Das Problem, das Sie jetzt dank der GitHub Problem behoben hat wurden mit worden Sie erhöht.

Ich glaube running npm install --save-dev @types/jquery wird dieses Problem korrekt beheben, wie ich das gleiche Problem festgestellt habe, und das Ausführen der dies tat den Trick (nachdem ich diesen Beitrag und den Link zum GitHub Problem gefunden).

das Update auf GitHub zu zitieren: „dies jetzt in der Dokumentation berücksichtigt wird: https://fullcalendar.io/docs/typescript/