добавление jquery в угловой проект Jhipster

Question

Я новичок в Jhipster и Angular, и я изо всех сил пытаюсь добавить экземпляр jquery в мой проект Jhipster Angular.

Мне просто нужно изменить тему и внешний вид стандартного приложения jhipster. Для этой цели я скачал тему, в которой есть сочетание jquery и bootstrap, поэтому я установил jquery через npm в проекте jhipster.

Я также вижу его папку в node_modules, так что она уже доступна.

Хотя я добавил его ссылку в vendor.ts, но, похоже, она не загружается. Так вот мой код vendor.ts, куда я импортирую файл jquery

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

Для проверки моего объекта jquery я кодировал следующее в своем файле home.component.ts.

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');
        });


    }

Но выдает ошибку после загрузки страницы

ERROR ReferenceError: $ is not defined
    at HomeComponent.ngOnInit

Любая подсказка по этому вопросу была бы весьма заметна.

РЕДАКТИРОВАТЬ: я добавляю свой код angular.json

{

"$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"
}
}

У него не было атрибута script, поэтому я добавил атрибут script, но он все равно не работает. Мастер Jhipster создает только этот файл angular.json по умолчанию. Я добавил

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

Answer 1

jQuery записывает себя в window. $ Или, если вы используете jQuery.noConflict (), он появится в window.jQuery, поэтому вы можете использовать $ или jQuery на веб-сайте.Он не экспортирует объект.

Чтобы использовать jQuery в вашем Angular-проекте, внедрите jQuery в свой scripts раздел ./angular.json для Angular 6 и 7 или в более старых проектах (Angular 2 - 5)./angular-cli.json.

Найдите "scripts": []

и замените его на

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

Тогда у вас есть доступ к $ as jQuery в вашемкод.

Answer 2

попробуйте это:

нпм я jquery - сохранить

в файле TypeScript:

import * as $ from 'jquery';

ngOnInit() {

    alert('I am Called');

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

}

---

или

добавить скрипт jquery в index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

в файле TypeScript:

declare var $: any;


ngOnInit() {
  alert('I am Called');

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

}