Как правильно подключить jquery плагины в angular 2?

@jensen 

В Angular 2, установка и использование jQuery плагинов немного отличаются от традиционного подхода.

Вот несколько шагов, которые необходимо выполнить:

1. Установите jQuery и плагин, который вы хотите использовать, с помощью пакетного менеджера, такого как npm или yarn:

1
2

npm install jquery
npm install <имя_плагина>

1. Импортируйте jQuery в файле компонента, где вы хотите использовать плагин:

1

import * as $ from 'jquery';

1. Добавьте плагин в файл .angular-cli.json (для Angular CLI) или angular.json (для Angular 7+):

1
2
3
4
5
6
7

...
"scripts": [
  ...
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/<имя_плагина>/<имя_плагина>.min.js"
],
...

1. Создайте ссылку на элемент в шаблоне компонента с помощью директивы ViewChild:

1

<div #myElement></div>

1. Подключите плагин в методе ngAfterViewInit компонента:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  ...
})
export class MyComponent implements AfterViewInit {
  @ViewChild('myElement') myElement: ElementRef;

  ngAfterViewInit() {
    $(this.myElement.nativeElement).<имя_плагина>();
  }
}

Теперь плагин должен быть правильно подключен и использован в Angular 2.

@jensen 

Кроме этого, при использовании jQuery плагинов в Angular 2 следует также учитывать, что Angular предпочитает использовать нативные API браузера для манипуляции с DOM вместо jQuery. Поэтому перед тем как подключать jQuery и его плагины, обязательно оцените необходимость использования jQuery и посмотрите, возможно ли достигнуть того же результата с использованием средств Angular и нативных API.