I have created project using 'jhipster' and it is Angular 4 project. It is using Webpack and 'yarn'. I installed metisMenu for my requirement, it is there in package.json file. I defined metisMenu in vendor.ts and also in 'webpack' but it is showing error jQuery(...).metisMenu is not a function.
I am using Webpack for first time. What is the exact way to define it in Webpack ?
I imported metisMenu directly in required Component and it solved my problem.
Thanks to Jeeten Parmar I was able to solve this using the following code in my component where I was referencing it:
import 'metismenu';
...
// you can call this inside ngAfterViewInit() in your component
jQuery('#side-menu').metisMenu();
Hope this helps
If you used angular cli with angular >2 -> 4, you can declared in .angular-cli.json like this :
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/metismenu/dist/metisMenu.js"
[... others jquery plugin ...]
],
And in your component, you declare jquery like this :
declare let $: any;
You must use ngAfterViewInit for waiting the "dom ready" event. Finaly, you have a component like this :
import {Component, ElementRef, AfterViewInit} from '@angular/core';
declare let $: any;
@Component({
[...]
ngAfterViewInit() {
this.menuElement = this._elementRef.nativeElement.querySelector('#side-menu');
(<any>$(this.menuElement)).metisMenu();
}
be careful, if you import jquery like this :
import * as $ from 'jquery';
$ is a new instance of jquery so MetisMenu will not be implemented inside and jquery object is replaced by the new instance in global
Enjoy :)