How to load/use jQuery in Ionic 4?

First of all, you need to download jQuery into your ionic project, so run the following command in terminal.

npm install --save @types/jquery

Then open the angular.json file in the root directory and search for the “scripts”. You may find two scripts object keys for the app build and test, make sure to add jquery path on both of them inside the array.

If you missed this step, You may get a Declaration error in the console.

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

Declare jquery on your required .page.ts file and write your jquery code inside the ngOnInit() method.

import { Component } from '@angular/core';
// Declare jquery
declare var $: any;

@Component({
  selector: 'app-sample',
  templateUrl: 'sample.page.html',
  styleUrls: ['sample.page.scss']
})
export class SamplePage {

  ngOnInit() {
    // Write your jquery code here
    $(document).ready(function () {
      alert("Hello from New to design")
    });
  }

  constructor() { }

}

That’s it! no more head-scratching. 🙂