3 party Plugins not working

[RamitAnandSharma]

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

[Cronkan]

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();

[RamitAnandSharma]

I have tried with both jQuery and $
Still does not works.

[twmobius]

I also have a problem adding jQuery in an angular-cli project I am working on. If I don't add the @types/jquery and declare var $: any; it works but no additional plugin seems to be working.

I tried adding the types and using the solutions proposed in #2141 to add jquery but I am getting a __WEBPACK_IMPORTED_MODULE_1_jquery is not a function. From what I can see the import returns an empty object.

[nacimux]

Same error for me __WEBPACK_IMPORTED_MODULE_3_jquery !

[RamitAnandSharma]

If i add the knob.js in

typings.ts
declare module 'jquery-knob/js/jquery.knob';

then refer in my file

knob.component.ts
import * as knob from 'jquery-knob/js/jquery.knob';

remove from global settings

angular-cli.json

"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" 
],

Error

jquery.knob.js:39 Uncaught TypeError: $ is not a function

[twmobius]

Ok I think I got it.

If you add the jquery types there is no need to add jquery in the global script list in angular-cli.json and you can normally do an import * as $ from 'jquery'

I am still trying to figure out why my jquery plugins (qtip2 in specific) does not work yet. Will get back on this if I find something

[RamitAnandSharma]

its working for me now
just added jquery and my 3 party lib in global scope.
and removed typing for jQuery

[RamitAnandSharma]

if 3 party lib does not have typings then you need to add it in angular-cli.json
or else u need to specify typing in typings.ts
declare module 'qtip';
and then you can import in specific component
import * as qtip from 'qtip';

But the problem is how to link it whit jQuery

$('a').qtip({
})

[twmobius]

No I don't think this is correct on jquery plugins.

In general, typings are there to provide types when writing typescript. It's a development tool not a production tool. So even adding the typings for qtip (or any similar jquery binding plugin) will not change whether or not the plugin will work.

The thing is that qtip and pretty much every jquery plugin will (should?) start with something along the following lines:

(function ( $ ) {
  $.fn.pluginMethod = function() {
    ....

    return this;
  }
})(jQuery)

When javascript is being evaluated in the browser, when it reaches that code block, it will call the function supplying the jQuery variable to the plugin scope as $. So it should not directly use $ from the global scope.

In theory adding a vendor.ts as suggested in #2141 with the following contents:

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

would expose jQuery variable to the global scope thus making it available to any subsequent plugin added in the global list. However I haven't managed to get it work yet. I know I am on the right path, but I am still missing something here.

[twmobius]

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');

[jackywang615]

I have the same error.
angular-cli: 1.0.0-beta.18
node:6.7.0
os: windows 10 x64

I add third party like jquery/bootstrap in my project.

the bootstrap style can not be used in html. and bootstrap alert jquery is not define.