ReferenceError: $ is not defined in Angular version 11

Dung Do Tien Nov 04 2021 345

Hello, I'm beginner in Angular and I created a component and inside ngOnInit() method I have call jquery to show menu bar for me. Like this:

public ngOnInit() 
    this.loginForm ={
        userName: ['', Validators.required],
        password: ['', Validators.required]

    // set title page

    //reset menu collapse

I really import Jquery inside angular.json file as below:


But when run code I got error ReferenceError: $ is not defined.

Below is my angular version:

Angular CLI: 11.2.14
Node: 14.17.5
OS: win32 x64

Angular: 11.2.14
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
@angular-devkit/architect       0.1102.14
@angular-devkit/build-angular   0.1102.14
@angular-devkit/core            11.2.14
@angular-devkit/schematics      11.2.14
@angular/cdk                    11.2.13
@angular/http                   7.2.16
@angular/material               7.3.7
@schematics/angular             11.2.14
@schematics/update              0.1102.14
rxjs                            6.6.7
typescript                      4.1.5

How can I fix it?

Thanks for any suggestion.

Have 1 answer(s) found.
  • T

    Tran Quang Hung Nov 04 2021

    You can do as bellow:

    Step 1: Install Jquery using the command below

    npm i jquery

    Step 2: Import Jquery inside your component by using the command below

    import * as $ from 'jquery';

    And now $ will be found for you!!

    I hope it solves the issue for you

Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close