Плагин jQuery не работает с Angular 5 (плагин не является функцией)

Question

Я пытаюсь заставить плагин jQuery (stickyNavbar) работать с Angular 5. Но я всегда получаю ошибку $(...).stickyNavbar is not a function (Изображение ниже)

.angular-cli.json

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../src/assets/js/jquery.stickyNavbar.min.js"
],

Компонент

import * as $ from 'jquery';


ngOnInit() {

    $(function () {
      alert('Hello'); // This works
      $('.menu-card').stickyNavbar(); // stickyNavbar is not a functin
    });

    setTimeout(() => {
      this.loading = false;
    }, 1000)
  }

Ошибка

У вас есть идея?

Answer 1

Когда вы добавляете сценарии в файл angular.json, упаковщик уже добавляет их. Вам не нужно использовать import. Если вы это сделаете, ваши скрипты будут дополнительно упакованы в виде модулей. Для вашего сценария вам просто нужно объявить переменную $ как любую:

declare var $: any;

Answer 2

Во многих случаях JQuery плохо работает с Angular, поэтому лучше найти плагин, совместимый с Angular.или просто добиться этого с помощью CSS. sticky-angular-material-header

Вы также можете использовать пакет angular-material или ngx-bootstrap, который предоставляет эти функции прямо из коробки.

Answer 3

У меня была такая же проблема.

Попробуйте сделать это:

npm install jquery

затем импортируйте jquery на нужную страницу как:

import * as $ from 'jquery';