I'm trying to incorporate jQuery into my angular project created with angular cli. I followed the instructions provided on this website:
To begin, I installed jQuery by running:
npm install --save jquery;Next, I added type definitions for jQuery to ensure type checking:
npm install --save-dev @types/jqueryThen, I included a reference to the jQuery file in the "scripts" array within angular-cli.json:
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]In my app.component.ts file, I imported jQuery as follows:
import { Component } from '@angular/core'; import * as jQuery from 'jquery'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'app'; test = jQuery("body"); }
However, when I run ng build, I encountered this error:
ERROR in ./src/app/app.component.ts (2,25): Module ''jquery'' resolves
to a non-module entity and cannot be imported using this construct.
If I remove the line
import * as jQuery from 'jquery';ERROR in ./src/app/app.component.ts (10,10): Cannot find name 'jQuery'.
I'm unsure of how to proceed from here.
Update 1
Following the suggestions made by @Saravana,
When I simply add declare const $: JQueryStatic and rebuild using `ng build`, I receive this error:
ERROR in ./src/app/app.component.ts (2,19): Cannot find name 'JQueryStatic'.
However, if I implement what Saravana proposed in his initial post before deleting it:
import "jquery";
declare const $: JQueryStatic;
The build process completes successfully without any issues. Therefore, I believe Saravana should revert back to his original suggestion.