Было много шумихи вокруг использования jQuery с Angular. Проблема заключается в правильной загрузке библиотек. В основном мы сталкиваемся с проблемой, поскольку
'ReferenceError: $ is not defined'
Теперь мы говорим об Angular, версии 4.x
Теперь мы можем добавлять библиотеки, такие как jQuery и bootstrap, таким образом, что мы не сталкиваемся с этими проблемами .

Шаг 1: Добавьте библиотеки

Выполните следующую команду в каталоге вашего проекта
npm install --save bootstrap jquery
Это добавит библиотеки в ваши 'node_modules'.

Шаг 2. Отредактируйте .angular-cli.json.

Поскольку у нас есть библиотеки, добавленные в наши node_modules, мы добавим скрипты и таблицы стилей по мере необходимости.

…rest of the angular-cli file,
“styles”: [
“styles.css”,
  “../node_modules/bootstrap/dist/css/bootstrap.min.css”
],
“scripts”: [
  “../node_modules/jquery/dist/jquery.min.js”,
  “../node_modules/bootstrap/dist/js/bootstrap.min.js”,
  “../node_modules/mobile-detect/mobile-detect.js”
],
…rest of the angular-cli file

Шаг 3: Объявите $ для использования во время компиляции

Объявите $ как переменную в ваших файлах ts, где вам в основном понадобится ссылка на $

import statements
declare var $: any;
export class AnyComponent {
    anyfunction : {
       $(‘#exampleid’).click();
       $(‘.modal-class’).modal(‘’);
    }
}

Теперь вы можете писать любой код jQuery или bootstrap, как в старые добрые времена… :)