2 instances de fullcalender dans le composant Angular provoquent une erreur jquery not found

J’ai ajouté 2 fullCalenders ( https://fullcalendar.io/ ) (avec différentes vues) dans un composant et j’obtiens une erreur jQuery.

Je reçois cette erreur même si je sépare les calendriers en deux composants différents et les ajoute au troisième composant comme celui-ci.

Si j’avais un seul composant avec un seul calendrier, tout fonctionne correctement (pas d’erreurs ni de fonctions modales bootstrap). Cela m’a amené à penser que le problème tient au fait que jQuery est chargé deux fois pour chaque calendrier ou smtn comme celui-ci et je ne sais pas encore comment le résoudre.

• Comment fermer tous les menus à l’intérieur d’un accordéon dans Angular 4
• Définition de type pour Bootstrap-Toggle
• Le message de validation requirejs pour la zone de texte angular 2 rest affiché même après la saisie de la valeur
• Angular2: méthode du composant d’appel à partir de la fonction javascript
• Dactylographie et jquery ajax

Voici à quoi ressemblent mes importations pour mes composants.

 import { OnInit, Component, Input, Output, ElementRef, EventEmitter, AfterViewInit, } from '@angular/core'; import * as $ from 'jquery'; import 'fullcalendar'; import { Options } from "fullcalendar"; 

Je reçois le message d’erreur lorsque je clique sur l’un des événements du calendrier. Dans les options de calendrier, j’ai configuré eventClick pour ouvrir un modal d’amorçage. Voici à quoi ressemble cette section.

 eventClick: function (event, jsEvent, view) { var stime = ''; var etime = ''; if (event.start) { stime = event.start.format('MM/DD/YYYY, h:mm a'); } if (event.end) { etime = event.end.format('MM/DD/YYYY, h:mm a'); } $('.titleSection').append('
' + event.title + '
'); $('.modal-body').append('Starts : ' + stime); $('.modal-body').append('
Ends : ' + etime); $('#myModal').modal(); return false; }, 

Ce sont mes importations de script dans index.html

Voici le github ripo i cloné pour lancer ce test de projet. https://github.com/nekken/ng2-fullcalendar Je travaille avec angular4 contrairement au repo.

Ce sont les erreurs que je reçois quand je clique sur les événements.

 fullcalendar.js:15 Uncaught ReferenceError: jQuery is not defined at fullcalendar.js:15 at fullcalendar.js:17 (anonymous) @ fullcalendar.js:15 (anonymous) @ fullcalendar.js:17 vendor.bundle.js:104209 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).modal is not a function at HTMLAnchorElement.eventClick (main.bundle.js:505) at constructor.publiclyTrigger (vendor.bundle.js:12330) at members.constructor.publiclyTrigger (vendor.bundle.js:10290) at members.constructor.handleSegClick (vendor.bundle.js:6263) at HTMLAnchorElement. (vendor.bundle.js:6256) at HTMLDivElement.dispatch (vendor.bundle.js:22357) at HTMLDivElement.elemData.handle (vendor.bundle.js:22165) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2838) at Object.onInvokeTask (vendor.bundle.js:107070) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.bundle.js:2837) 

Merci pour toute information à ce sujet.

UPDATE1

Comme suggéré dans le commentaire, j’ai mis à jour l’ordre des importations et ajouté moment.js à partir de cdnjs dans mon index.html. Je n’ai plus les 2 premières erreurs dans mon post concernant ‘jQuery not defin’.

Maintenant, lorsque je clique sur cal events, le message “modal n’est pas une erreur de fonction” et aucun modal … mais lorsque j’appelle la fonction modal () à partir du débogueur, le modal s’affiche avec mon contenu. calender.component.ts La ligne 83 est cette ligne

  $('#myModal').modal(); 

• Glisser le curseur espace entre ne pas montrer sur la charge
• La fonction anti-rebond ne fonctionne pas lorsqu’elle n’est pas directement liée à un bouton
• Angular2 (Beta 11) lève une exception lorsqu’on essaie d’envelopper bootstrap-daterangepicker dans le composant.
• Utiliser un script jQuery avec le projet Angular 6 CLI
• Comment append une classe ‘active’ à relier avec angular 2