CODEWITHSUNDEEP
angularangular2-headers
ToDo
ToDo

Reputation: 782

Angular 2 used with JQuery

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).

Upvotes: 1

Views: 464

Answers (2)

Michael Kang
Michael Kang

Reputation: 52867

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.

Upvotes: 0

kind user
kind user

Reputation: 41893

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;

Upvotes: 2

Related Questions