Angular 7 - плагин jQuery, не могу найти функцию

Question

В настоящее время я пытаюсь использовать плагин jQuery, который называется cube portfolio .

. До сих пор я добавил каталог плагинов в свою папку ресурсов, добавил его JS и CSS вangular.json и пробовал следующее:

import { Component, OnInit } from '@angular/core';
import * as AOS from 'aos';
import * as $ from 'jquery';
import * as cubeportfolio from 'src/assets/cubeportfolio/js/jquery.cubeportfolio.js';


@Component({
  selector: 'app-all',
  templateUrl: './all.component.html',
  styleUrls: ['./all.component.scss']
})
export class AllComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    AOS.init();

    $('#js-grid-masonry').cubeportfolio({
      filters: '#js-filters-masonry',
      layoutMode: 'grid',
      defaultFilter: '*',
      animationType: 'slideDelay',
      gapHorizontal: 20,
      gapVertical: 20,
      gridAdjustment: 'responsive',
      mediaQueries: [{
        width: 1500,
        cols: 5,
      }, {
        width: 1100,
        cols: 4,
      }, {
        width: 800,
        cols: 3,
      }, {
        width: 480,
        cols: 2,
        options: {
          caption: '',
          gapHorizontal: 10,
          gapVertical: 10,
        }
      }],
      caption: 'overlayBottomAlong',
      displayType: 'bottomToTop',
      displayTypeSpeed: 100,

      // lightbox
      lightboxDelegate: '.cbp-lightbox',
      lightboxGallery: true,
      lightboxTitleSrc: 'data-title',
      lightboxCounter: '<div class="cbp-popup-lightbox-counter">{{current}} of {{total}}</div>',
    });

  }

}

Каким-то образом JS, похоже, не работает - в консоли появляется следующая ошибка:

ОШИБКА TypeError: jquery__WEBPACK_IMPORTED_MODULE_3 __ (...). Cubeportfolio не является функцией.

Дополнительный код:

"styles": [
    "src/assets/cubeportfolio/css/cubeportfolio.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "src/assets/cubeportfolio/js/jquery.cubeportfolio.min.js"
]

Answer 1

Если вы действительно решили ввести страдание jQuery, используйте ngAfterViewInit, а не ngOnInit, так как DOM еще не существует.

Избавиться от

import * as cubeportfolio from 'src/assets/cubeportfolio/js/jquery.cubeportfolio.js';

поскольку импортируемые скрипты плагина jQuery расширяют объект jQuery и не должны импортироваться.