How to resolve "ReferenceError: $ is not defined"?

Question

I am trying to use jquery in angular2 and got this error: ReferenceError: $ is not defined from the following code.

declare var $:JQueryStatic;

export class AppComponent {    

ngOnInit() {    

    var container = $("#contact-us-form");    

    container.css("width", $(document).width()).css("height", $(document).height()).hide();    

    container.find(".modal-content .button-close").click(function(){ this.toggleModalWindow("contact-us-form"); });    

    $("#contact-link").click(function(){ this.toggleModalWindow("contact-us-form"); });    

   }     
}      

How could I resolve this ?

Answer 1

add angular-cli.json

 "../node_modules/jquery/dist/jquery.js"

Have a typescript file

  import * as $ from "jquery";

install jquery using npm

Answer 2

FOLLOW THESE STEPS:

1. npm i jquery --save
2. npm i @types/jquery -D
3. import * as $ from 'jquery'---> in app.module.ts

That should do the trick and no need to put declare var jQuery: any; or declare var $: any; in each file.