adding jquery in Jhipster angular project

I am new in Jhipster and Angular, and I am struggling in adding a jquery instance in my Jhipster Angular project.

I simply need to change the theme and outlook of the default jhipster application. For that purpose I downloaded a theme which has the combination of jquery and bootstrap, therefore, I installed the jquery through npm in the jhipster project.

I can see its folder in the node_modules as well, so it is already available.

Even though I have added its link in the vendor.ts but it seems it does not get loaded. So here my vendor.ts code where I am importing jquery file

import 'jquery/dist/jquery.min.js';

To test my jquery object I coded following in my home.component.ts file.

import { Component, OnInit } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager } from 'ng-jhipster';
import { LoginModalService, AccountService, Account } from 'app/core';

declare var $: any;
@Component({
    selector: 'jhi-home',
    templateUrl: './home.component.html',
    styleUrls: ['home.css'],
})
export class HomeComponent implements OnInit {
    account: Account;
    modalRef: NgbModalRef;

    constructor(
        private accountService: AccountService,
        private loginModalService: LoginModalService,
        private eventManager: JhiEventManager
    ) {}

    ngOnInit() {

        alert('I am Called');

        $(document).ready(function() {
            alert('I am Called From jQuery');
        });


    }

But it gives me an error after the page gets loaded

ERROR ReferenceError: $ is not defined
    at HomeComponent.ngOnInit

Any tip on this matter would be highly appreciable.

EDIT: I am adding my angular.json code

{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
    "paperproject": {
        "root": "",
        "sourceRoot": "src/main/webapp",
        "projectType": "application",
        "architect": {}
    }

},
"defaultProject": "paper-auth",
"cli": {
    "packageManager": "npm"
},
"schematics": {
    "@schematics/angular:component": {
        "inlineStyle": true,
        "inlineTemplate": false,
        "spec": false,
        "prefix": "jhi",
        "styleExt": "css"
    },
    "@schematics/angular:directive": {
        "spec": false,
        "prefix": "jhi"
    },
    "@schematics/angular:guard": {
        "spec": false
    },
    "@schematics/angular:pipe": {
        "spec": false
    },
    "@schematics/angular:service": {
        "spec": false
    },
    "scripts": "./node_modules/jquery/dist/jquery.min.js"
}
}

It didn't had any script attribute therefore I added script attribute But it still does not work. Jhipster wizard only creates this default angular.json file. I added

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