web-dev-qa-db-fra.com

fullcalendar & Angular 5

(Nouvelle édition)

J'ai implémenté Angluar 5 avec FullCalendar @Alpha Release .

J'avais précédemment des problèmes pour implémenter FullCalendar to Angular ci-dessous. Je pensais que vous voudriez peut-être aussi une mise à jour.

Comment puis-je mettre en œuvre correctement Fullcalendar avec Angular 5 sans erreur? J'essaye de l'implémenter dans un composant spécifique. J'ai installé les paquets suivants

  • jquery 
  • moment 
  • calendrier complet 
  • calendrier complet

Pour votre information, le post ci-dessous est le plus proche que je suis venu à trouver une solution. J'ai suivi les instructions, mais j'ai toujours l'erreur 'JQueryPromise'. S'il vous plaît conseiller et merci d'avance!

Fonction angulaire de rappel de l'événement jQuery

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

J'ai suivi toutes les étapes avec religion, mais je continue à avoir des erreurs. Ironiquement, il est capable de se charger lorsque j'actualise la page et je peux contourner cette erreur, mais elle persiste, en particulier lorsque je lance d'abord "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'.

Nouveau développement dans ce trou de lapin

J'ai juste essayé de créer un nouveau composant "schedule.component" et de tout déplacer là-bas, mais maintenant je reçois les erreurs suivantes

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.
angulartypescriptfullcalendarfullcalendar-scheduler
10
Jose

Le problème que vous rencontriez a maintenant été résolu grâce au problème GitHub que vous avez soulevé. 

Je pense qu'exécuter npm install --save-dev @types/jquery corrigera correctement ce problème car j'ai rencontré le même problème, et le faire a fonctionné (après avoir trouvé ce message et le lien vers le problème GitHub).

pour citer le correctif sur GitHub: "ceci est maintenant pris en compte dans la documentation: https://fullcalendar.io/docs/TypeScript/ "

10
Andrew Stalker

Votre projet ne contient pas de typages jquery . Essayez de les ajouter en utilisant cette commande

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

Ce problème a été soulevé dans l'outil de suivi des problèmes d'agenda complet ( https://github.com/fullcalendar/fullcalendar/issues/3991 ).

0
David G.

Il semble donc que quelque chose ne va pas dans les fichiers * .d.ts du dossier node_modules. J'ai ouvert un problème dans le projet GitHub 

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

Je suis entré dans le type de problème correspondant remplacé par 'any':

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

'JQueryPromise' 
'JQueryEventObject' 
'JQueryAjaxSettings' 

Ironiquement, après avoir résolu le problème, je n’ai plus le problème "Refuser de charger la police". Je ne peux pas commenter celui-là. Tout ce que je sais, c'est que ça fonctionne comme il se doit. 

Joyeuses fêtes!

0
Jose

Bonjour, je sais que c’est une vieille question, mais ce npm install --save-dev @types/jquery ne fonctionne pas pour moi .

  • Ouvrez l’option Gérer les packages NuGet pour la solution (option visuelle de Gestionnaire de packages) à Tools>NuGet Package Manager> Manage NuGet Packages for Solution
  • Écrivez dans le champ de recherche: jquery.type
  • Rechercher le package jquery.TypeScript.DefinitelyTyped
  • Installer dans votre projet Web
  • Résolu

J'espère que cela a pu aider ceux qui étaient dans la même situation que moi.

0
T3X