lbertenasco/ap-ng2-fullcalendar

TypeError: $(...).fullCalendar is not a function

Opened this issue · 9 comments

RaduGrama commented

I cannot get rid of this error when jQuery is loaded explicitly in index.html (other non-Angular code depends on it).

lbertenasco commented

Hi @RaduGrama Can you add more details into this issue?

RaduGrama commented

Hi @lbertenasco, here is more information that I think may be relevant:

I have the following lines in index.html:

  <script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
  <!-- Load jQuery -->
  <script type="text/javascript" src="assets/js/jqueryui-1.10.3.min.js"></script>
  <!-- Load jQueryUI -->
  <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
  <!-- Load Bootstrap -->

Followed by a lot more, and I cannot get rid of them.

I have ap-ng2-fullcalendar installed and configured in a component exactly as described at https://github.com/lbertenasco/ap-ng2-fullcalendar, pretty much copy/paste to get this running. I am getting the error above in line 15 of calendar.js and I am running out of ideas.

RaduGrama commented

The exact error is:

core.es5.js:1020 ERROR TypeError: $(...).fullCalendar is not a function
    at calendar.js:15
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:499)
    at ZoneTask.invoke (zone.js:488)
    at timer (zone.js:2040)
lbertenasco commented

Just install Jquery as a npm package with --save and then add import * as $ from 'jquery'; in your main.ts file if you are using png-cli it should take care of compiling the js.

lbertenasco commented

There is no need to add custom scripts in your index.html

RaduGrama commented

That doesn't seem to get fullcalendar to work and I get the same error.

I get other errors when jQuery is removed from index.html because of other .js files depending on it - I am using a template with many .js files being loaded in index.html and I have to live with it for now. Those errors are irrelevant to the issue discussed though.

RaduGrama commented

@lbertenasco I'm not sure where the breakdown occurs. Line 4 in calendar.js becomes redundant since $ already exists from index.html (not ideal, I understand). But the require('fullcalendar') in line 5 in calendar.js should still hook up fullcalendar to jQuery, and for some reason that seems not to work, right?

RaduGrama commented

Going back to 1.3.1 vs 1.3.2 fixed it.

jmrapp1 commented

I put import * as $ from 'jquery' at the top of the file that was trying to use the full calendar functions and it solved the issue.

  • 👍1