Using jQuery in Angular4 template

Question

User-1597861494 posted

I've created an Angular4 project in asp.net core utilizing the built in templates. I can see it includes jQuery in the package.json file, and it is downloading properly. However, I can't seem to use it without errors. Any kind of import I use gives me this:

Module "jquery" resolves to a non-module entity and cannot be imported using this construct

The intellisense is working properly, but it won't run. I would have thought this would be pretty straightforward, or built-in since it is downloading it.

Has anyone gotten jQuery to work with the new core templates?

Answer 1

User-1838255255 posted

Hi yoder,

According to your description, about how to use jquery in Angular 4, please check the following tutorials:

Angular 4 - Implementing Jquery Functions:

https://www.youtube.com/watch?v=yXgDKQn-qYI 

Angular 4.x – Integrate a jQuery Plugin:

https://blog.lysender.com/2017/10/angular-4-x-integrate-a-jquery-plugin/ 

Best Regards,

Eric Du

Answer 2

User-1597861494 posted

Thanks Eric, but those are using the Angular Cli, not the Visual Studio template. The Visual Studio template is not using Angular Cli. Is the Visual Studio template already obsolete? Most things I'm seeing now are using the Angular Cli so that seems like it is the preferred way.

Answer 3

User-474980206 posted

the template uses webpack and angulars webpack plugin  to build, not the angular cli. but this has nothing to do with using jQuery. the template (as does the cli) uses node  modules, and there is not an official jQuery module, so you will need to find a plugin, or use a shim - see the web pack docs.

be careful how you use jQuery as in the server pre-render there is not a real dom.

note: in general it not a good idea to use jQuery with angular.