Angular 7 - jQuery插件，找不到功能

Question

I'm currently trying to use a jQuery plugin, called cube portfolio .

So far I've added the plugins directory to my assets folder, added its JS and CSS to angular.json , and tried the following:

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>',
    });

  }

}

Somehow the JS doesn't seem to work - following error show up in the console:

ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_3__(...).cubeportfolio is not a function.

Further code:

"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

If your are really determine to introduce the misery of jQuery use ngAfterViewInit, not ngOnInit as the DOM doesn't exist yet.

Get rid of

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

as importing jQuery plugin scripts extend the jQuery object and should not be imported.