Angular组件中的2个fullcalender实例导致jquery未找到错误 [英] 2 fullcalender instances in Angular component causes jquery not found error

问题描述

我加了2个fullCalenders （

解决方案

在过去的Angular2中，Bootstrap和jquery类似的问题。不幸的是，bootstrap要求jquery被声明为全局的。以下链接可能有所帮助： -

https://weblog.west-wind.com/posts/2016/Sep/12/External-JavaScript-dependencies-in- Typescript-and-Angular-2＃jQueryandPlugins

I added 2 fullCalenders (https://fullcalendar.io/) (with different views) in one component and i am getting jquery error.

I get this error even if i separate the calenders in two different components and added to third component like this.

<div>
  <app-day-calender></app-day-calender>
  <app-calender></app-calender>
</div>

If i had one component with just one calendar everything works fine(no errors and bootstrap modal works). This led me to believe that the issue is with jquery being loaded twice for each calendar or smtn like that and i have no clue on how to sort that stuff out yet.

Here is what my imports look like for my components.

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

I am getting the error when i click on one of the events on the calendar. In the calendar options i have set up eventClick to open a bootstrap modal. Here is what that section looks like.

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('<h5>' + event.title + '</h5>');

  $('.modal-body').append('<b>Starts : </b>' + stime);
  $('.modal-body').append('<br/><b>Ends : </b>' + etime);


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

  return false;
},

This are my script imports in index.html

  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>

Here is the github ripo i cloned to get this project test going. https://github.com/nekken/ng2-fullcalendar I am working with angular4 unlike the repo.

This is the errors i get when i click on the events.

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.<anonymous> (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)

Thanks for any info on this.

UPDATE1

As suggested in comment i updated order of imports and added moment.js from cdnjs in my index.html. I no longer have the first 2 errors in my post regarding 'jQuery not defined'.

Now when i click on cal events it shows same 'modal is not a funciton error' and no modal....but when i call the modal() function from the debuger the modal shows up with my content. calender.component.ts Line 83 is this line

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

解决方案

Faced similar issue with Bootstrap and jquery in past with Angular2. Unfortunately bootstrap requires jquery to be declared global. The following link might help:-

https://weblog.west-wind.com/posts/2016/Sep/12/External-JavaScript-dependencies-in-Typescript-and-Angular-2#jQueryandPlugins

这篇关于Angular组件中的2个fullcalender实例导致jquery未找到错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！