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 ?

/*Jquery is installed using typings install dt~jquery --global --save. Getting error in var container = $("#contact-us-form"); line saying that $ is not defined. */ — raj m
– raj m, Commented Aug 2, 2016 at 5:49
Could you explain the purpose of the declaration declare var $:JQueryStatic;? — FDavidov
– FDavidov, Commented Aug 2, 2016 at 6:07
Well... $ is a very special character both for Angular and JQuery. Try using some other variable name and see if you still get the error. — FDavidov
– FDavidov, Commented Aug 2, 2016 at 6:13
I just used 'Jq', n i am getting 'Jq is not defined in [null]' — raj m
– raj m, Commented Aug 2, 2016 at 6:17

raj m · Accepted Answer · 2017-07-20 09:10:05Z

4

add angular-cli.json

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

Have a typescript file

  import * as $ from "jquery";

install jquery using npm

answered Jul 20, 2017 at 9:10

raj m

2,0136 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gildniy · Accepted Answer · 2017-11-29 08:13:01Z

4

FOLLOW THESE STEPS:

npm i jquery --save
npm i @types/jquery -D
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.

edited Nov 29, 2017 at 8:13

answered Nov 28, 2017 at 23:17

gildniy

3,9731 gold badge38 silver badges25 bronze badges

1 Comment

Muhammad Bilal Over a year ago

Steps are working. Please add some comments with steps to explain.

Utkarsh Mankad · Accepted Answer · 2019-03-29 06:42:54Z

0

Try these Steps-

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

answered Mar 29, 2019 at 6:42

Utkarsh Mankad

2471 gold badge7 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Linked

Related