0

I have a project generated from VS 2017 Angular 4 +Asp Core template and I want to use a jQuery plugin so I need to import jQuery,in my .ts file I've used: 

declare var $: any;

in webpack.config.vendor.js I have 

plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),

but in console I got this error: 

Uncaught ReferenceError: jQuery is not defined

thanks

mrapi
  • 5,214
  • 6
  • 27
  • 48

2 Answers2

2

You need to import jquery with angular-cli. Edit your angular-cli.json file.

Find script array and add jquery.

     "scripts": [
       "../node_modules/jquery/dist/jquery.min.js"
      ],
Nawrez
  • 3,113
  • 8
  • 25
  • 39
1

Follow the link below to install jquery.

https://www.gurustop.net/blog/2016/11/18/3821/jquery-angular2-angularcli-how-to

After that you need to add :

 declare const $: JQueryStatic;

in your app.component.ts to be available for all your application.

Nour
  • 4,263
  • 2
  • 17
  • 21
  • Hi,I've done installation but have no angular-cli.json file,also on: declare const $: JQueryStatic; I got : Cannot find name 'JQueryStatic'.thanks – mrapi Oct 25 '17 at 07:33
  • Do you use angular cli ? – Nour Oct 25 '17 at 07:37
  • 1
    https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack – Nour Oct 25 '17 at 07:57
  • seems that jquery is imported with import * as $ from 'jquery'; but it gives me errors on my plugin : $(this.el.nativeElement).find('#passw').keyboard({ (TS) Property 'keyboard' does not exist on type 'JQuery' – mrapi Oct 25 '17 at 08:00
  • 1
    You can cast it to any... ($(this.el.nativeElement).find('#passw')).keyboard({}) – Nour Oct 25 '17 at 08:07
  • Error is gone but my plugin doesn't work,it is mottie virtual keyboard and is not shown.no error in console – mrapi Oct 25 '17 at 08:40
  • I am having the same problem. I don't have any angular-cli.json file, and when I try to do this: import * as $ from 'jquery'; I get an error saying: Module ''jquery'' resolves to a non-module entity and cannot be imported using this construct. Has anybody found a solution to this? – JRS Dec 04 '17 at 14:15