CODEWITHSUNDEEP
angular
raj m
raj m

Reputation: 2023

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

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 ?

Upvotes: 4

Views: 17798

Answers (3)

Utkarsh Mankad
Utkarsh Mankad

Reputation: 247

Try these Steps-

  1. npm install jquery @types/jquery --save
  2. go to angular.json in the project, add 'node_modules/jquery/dist/jquery.min.js' in the scripts: [ ].
  3. Reload project.

Upvotes: 0

gildniy
gildniy

Reputation: 3943

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.

Upvotes: 4

raj m
raj m

Reputation: 2023

add angular-cli.json

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

Have a typescript file 

  import * as $ from "jquery";

install jquery using npm

Upvotes: 4

Related Questions