Angular 2 used with JQuery

Question

I'm trying to use JQuery with Angular 2 Cli.

I installed JQuery by using npm install jquery --save and adding import $ from 'jquery/dist/jquery' to app.module.ts.

I get this error in Chrome Cannot find module 'jquery/dist/jquery'.). But I can find the jquery folder in node_modules.

I'm using JQuery because I want to use this header with shadow effect in my project. I can't find an angular version of this type of header without using Material Design or other UI components (as I prefer not to use this because it changes some of the styling in my project).

score 2 · Accepted Answer · answered Feb 12 '17 at 23:37

2

There's another, very simple method to add jQuery into your project.

Include jQuery in your index.html code.

<script src="jquery.min.js"></script>
Then just declare it inside specified component:

declare let $:any;

answered Feb 12 '17 at 23:37

kind user

40,029
7
67
77

Thank you, this worked. But I used `` instead. – ToDo Feb 12 '17 at 23:53
@todo Of course. I've just used my code, `jQuery` is stored locally in a file in the same folder as `index.html` is :) – kind user Feb 12 '17 at 23:55
This is really ugly...but it's easy, fast, and it works! :D You can also add the optional integrity attr if you want, like: `` – Guntram Jun 26 '18 at 13:26

Michael Kang · Answer 2 · 2017-02-13T01:01:36.013

Import the types for jQuery so that the TypeScript compiler knows about them:

npm install --save @types/jquery

Make sure you've installed jQuery as well:

npm install --save jquery

And included the script from your HTML page:

<script src="node_modules/jquery/dist/jquery.js"></script>

Your tsconfig file will look under the node_modules/@types folder by default to resolve types. Assuming, you haven't changed the defaults, it should automatically resolve the jQuery types properly at compile-time.

Angular 2 used with JQuery

2 Answers2

Linked