ReferenceError: $ is not defined in Angular version 11
Dung Do Tien
Nov 04 2021
113
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 = this.formBuilder.group({
userName: ['', Validators.required],
password: ['', Validators.required]
});
// set title page
this.serviceTitle.setTitle(this.constLeads.TiltePageLogin);
//reset menu collapse
$(".sidebar-collapse").removeClass("sidebar-collapse");
}
I really import Jquery inside angular.json file as below:
"scripts":
[
"node_modules/chart.js/dist/Chart.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/jquery-ui-dist/jquery-ui.js"
]
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.
-
T0
Tran Quang Hung Nov 04 2021
You can do as bellow:
Step 1: Install Jquery using the command below
npm i jqueryStep 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
* Type maximum 2000 characters.
* All comments have to wait approved before display.
* Please polite comment and respect questions and answers of others.