conflict with protractor, impossible to load JQuery

[dexluce]

Hello, I'm using this seed for my project: https://github.com/mgechev/angular-seed After npm install angular2-fullcalendar --save and having set the css in my project.config.ts,

I have the following error while compiling:

error TS2403: Subsequent variable declarations must have the same type. Variable '$' must be of type 'JQueryStatic', but here has type 'cssSelectorHelper'

and when loading the component that uses full-calendar in his template, this is in my browser console:

GET XHR http://localhost:5555/node_modules/jquery.js [HTTP/1.1 404 Not Found 1ms]
GET XHR http://localhost:5555/node_modules/fullcalendar.js [HTTP/1.1 404 Not Found 3ms]
"EXCEPTION: Uncaught (in promise): Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
    patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
    NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
    ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
    Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
    ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]

    Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js
(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
    patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
    NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
    ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
    Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
    ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]

    Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js"  core.umd.js:3472:13
ORIGINAL STACKTRACE:  core.umd.js:3477:17
resolvePromise@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:501:31 [angular]
resolvePromise@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:486:17 [angular]
scheduleResolveOrReject/<@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:535:17 [angular]
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
drainMicroTaskQueue@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:433:25 [<root>]
ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:349:25 [<root>]
  core.umd.js:3478:17
Unhandled Promise rejection: "(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
    patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
    NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
    ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
    Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
    ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]

    Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js" ; Zone: angular ; Task: Promise.then ; Value: Object { __zone_symbol__error: Error, fileName: Getter, lineNumber: Getter, columnNumber: Getter, message: Getter, name: Getter, stack: Getter, originalStack: Getter, zoneAwareStack: Getter, toString: createMethodProperty/props[key].value(), 4 more… } "(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
    patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
    NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
    ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
    Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
    ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]

    Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js"  zone.js:420:13
Object { __zone_symbol__error: Error, fileName: Getter, lineNumber: Getter, columnNumber: Getter, message: Getter, name: Getter, stack: Getter, originalStack: Getter, zoneAwareStack: Getter, toString: createMethodProperty/props[key].value(), 7 more… }

In my package.json I tried to pass protractor to "^4.0.14". No changes.

Any idea? Also, don't I need to add a fullcalendar.js to my index in order to make it work? Which .js to use?

Thanks Dex

[prasanthsd]

Did you manage to fix this? I just ran into the same issue

[evandenbeld]

We had problems running e2e with the full-calender with protractor. All tests timed-out.

Running the initialization outside of the ngZone fixed this:

this.fullCalendar = $('#full-calendar'); this.ngZone.runOutsideAngular(() => { this.fullCalendar.fullCalendar(this.kalendarOpties); });