Angular 8 Использование Jquery

Question

У меня есть приложение, которое использует SignalR для связи с настольным приложением. Чтобы использовать SignalR, мне нужно использовать jQuery в моем файле .ts. Однако после миграции с Angular 7 на Angular 8 он не работает.

Я использую declare var $: any;, как и в предыдущих версиях Angular. К сожалению, $ теперь печатает пусто на консоли.

Итак, Angular v8 больше не поддерживает использование jQuery таким образом, или в миграции произошел сбой?

Обновление:

У меня есть jQuery v3.3.1, загруженный через npm.

Это делает его глобальным (в angular.json)

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

Answer 1

Angular 8 работает с JQuery.

 "dependencies": {
  ...
  "jquery": "^3.4.1",
  ...
}

в вашем файле angular.json импортируйте требуемый файл следующим образом:

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

в начале ./, просто node_modules/...

В вашем app.module убедитесь, что он работает следующим образом:

import { AppComponent } from './app.component';

declare var $: any;
console.log(`jQuery version: ${$.fn.jquery}`);

@NgModule({

В консоли инструментов разработчика он должен напечатать это:

jQuery версия: 3.4.1

Answer 2

Итак, немного отступив от проблемы и используя ответ Робертса, чтобы подтвердить, что jQuery работал в app.module.ts (я не знал, что console.log будет работать в середине импорта), я понял, что боролся с этой проблемой в последний раз, когда я обновил v4 до v7.

То, что произошло, - это зависимость, вызывающая перезагрузку jQuery. Раздел приложения, который запускает связь signalR, также загружает другую зависимость (telerik-angular-report-viewer), из-за которой console.log ($) ничего не отображает, поскольку jQuery еще не был загружен в компонент.

Исправление:

Удалите следующий код

window.jQuery = jQuery;
window.$ = jQuery;

из следующих файлов

• зависимостей \ telerikReportViewer.kendo.min.js
• зависимостей \ telerikReportViewer.js
• CJS \ Telerik-отчет-viewer.component.js
• эс \ Telerik-отчет-viewer.component.js

Answer 3

Более элегантный способ без использования

declare var $: any;

Первый запуск

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

Затем в разделе скриптов в architect => сборка файла angular.json добавьте путь для jquery lib

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

Затем в вашем tsconfig.app.json

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

Так что теперь вы можете использовать jquery в любом месте вашего проекта, не используя declare var $ : any для каждого файла, который вам нужен для jquery