Tag: jQuery

This article describes how to integrate jQuery into the Angular 8 project.

At first, you have to check if the jquery and the @types/jquery are already installed in your Angular project.

Open the package.json file:

In this case the jquery is already installed, but the @types/jquery is missing.

Run the following command(s) for the missing package(s):

npm install jquery --save
npm install @types/jquery --save

Then open the angular.json file.

In the projects -> architect -> build -> options section add the jquery.min.js file into the scripts:

"scripts": [
              "node_modules/jquery/dist/jquery.min.js"
            ] 

Then open the tsconfig.app.json file.

Add the jquery into the types section.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [ "jquery" ] // <-- add the jquery here
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

Finally, here is a small example of how to use jquery in your Angular 8 component.

...
 ngOnInit(): void {

    jQuery(document).ready(function () {

	//your code
      
    });

  }

With these few simple steps you can import jquery into Angular 8 project.

Related Article

How to create Angular 8 project in Visual Studio 2019?

---