angular-cli: 3 party Plugins not working

Please provide us with the following information:

OS?

Windows 10

Versions.

angular-cli: 1.0.0-beta.17

Repro steps.

ng new testApp

The log given by the failure.

inline template:6:4 caused by: jQuery(…).find(…).knob is not a function at resolvePromise (zone.js:429) at zone.js:406 at ZoneDelegate.invoke (zone.js:203) at Object.onInvoke (ng_zone_impl.js:43) at ZoneDelegate.invoke (zone.js:202) at Zone.run (zone.js:96) at zone.js:462 at ZoneDelegate.invokeTask (zone.js:236) at Object.onInvokeTask (ng_zone_impl.js:34) at ZoneDelegate.invokeTask (zone.js:235)

Mention any other details that might be useful.

http://plugins.jquery.com/knob/ https://github.com/seiyria/bootstrap-slider

package.json “dependencies”: { “@angular/common”: “~2.0.0”, “@angular/compiler”: “~2.0.0”, “@angular/core”: “~2.0.0”, “@angular/forms”: “~2.0.0”, “@angular/http”: “~2.0.0”, “@angular/platform-browser”: “~2.0.0”, “@angular/platform-browser-dynamic”: “~2.0.0”, “@angular/router”: “~3.0.0”, “bootstrap”: “^3.3.7”, “bootstrap-slider”: “^9.2.0”, “core-js”: “^2.4.1”, “font-awesome”: “^4.6.3”, “jquery”: “^3.1.1”, “jquery-knob”: “^1.2.11”, “moment”: “^2.15.1”, “rxjs”: “5.0.0-beta.12”, “tether”: “^1.3.7”, “ts-helpers”: “^1.1.1”, “zone.js”: “^0.6.23” }

I add blow in my angular-cli.json file: “scripts”: [ “…/node_modules/jquery/dist/jquery.js”, “…/node_modules/tether/dist/js/tether.js”, “…/node_modules/moment/moment.js”, “…/node_modules/bootstrap/dist/js/bootstrap.js”, “…/node_modules/bootstrap-slider/dist/bootstrap-slider.js”, “…/node_modules/jquery-knob/dist/jquery.knob.min.js” ],

> Slider component file

import { Component, AfterViewInit, ElementRef, Inject } from ‘@angular/core’;

declare var jQuery: any; @Component({ selector: ‘app-slider’, template: <div id="sliderUI"></div> }) export class SliderComponent implements AfterViewInit { elementRef: ElementRef; slideValue: number = 0; constructor( @Inject(ElementRef) elementRef: ElementRef) { this.elementRef = elementRef; } ngAfterViewInit() { jQuery(this.elementRef.nativeElement).find(“#sliderUI”).slider(); } }

> Knob component file

import { Component, AfterViewInit, ElementRef, Inject, Input, Output, EventEmitter } from ‘@angular/core’; declare var jQuery: any; @Component({ selector: ‘app-knob’, template: <input type="text" id="knob" class="dial" value="25" data-width="180" min="0" max="100" data-displayinput="true" data-thickness=".05">, }) export class KnobComponent implements AfterViewInit { private elementRef: ElementRef;
constructor( @Inject(ElementRef) elementRef: ElementRef) { this.elementRef = elementRef; } ngAfterViewInit() { jQuery(this.elementRef.nativeElement).find(“#knob”).knob();
} }

> same example works in Angular2 project but not in Angular-CLI

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 15 (1 by maintainers)

Most upvoted comments

https://github.com/aterrien/jQuery-Knob https://api.jquery.com/find/ jQuery is not used with ‘jQuery’ but with declare var $: any; $(this.elementRef.nativeElement).find("#knob").knob();

+10

Cronkan on Oct 18, 2016

Ok back again. I think I found out what’s going on. I don’t have that much experience with webpack but it seems that although adding the plugin on the global list in angular-cli.js adds it to the webpack, it does not evaluate it.

Thus instead of having it there, if I just add a require() directive on the vendor.ts solution will force evaluation after the jquery has been added and the plugin works.

tl;dr;

npm install --save jquery
npm install --save-dev @types/jquery
npm install --save qtip2 (or whatever plugin you want to use)

Change angular-cli.json to read:

"scripts": [
  "../vendor.ts",
  // any other third party javascript library (e.g. moment or bootstrap etc)
],

create a vendor.ts on the same directory as angular-cli.json that reads:

import * as $ from 'jquery';
window['$'] = window['jQuery'] = $;

// Replace with the plugin of your choosing
require('./node_modules/qtip2/dist/jquery.qtip.js');

twmobius on Oct 19, 2016