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

[RaduGrama]

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

[lbertenasco]

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

[RaduGrama]

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]

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]

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]

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

[RaduGrama]

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]

@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]

Going back to 1.3.1 vs 1.3.2 fixed it.

[jmrapp1]

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.