Can't initiate the plugin. jQuery(...).gridstack is not a function in my angular 5 project

[chandruparkunan]

ERROR TypeError: jQuery(...).gridstack is not a function
at GridStackComponent.ngAfterContentInit (index.js?4484:244)
at callProviderLifecycles (core.js?593e:12684)
at callElementProvidersLifecycles (core.js?593e:12658)
at callLifecycleHooksChildrenFirst (core.js?593e:12641)
at checkAndUpdateView (core.js?593e:13791)
at callViewAction (core.js?593e:14138)
at execComponentViewsAction (core.js?593e:14070)
at checkAndUpdateView (core.js?593e:13793)
at callViewAction (core.js?593e:14138)
at execEmbeddedViewsAction (core.js?593e:14096)

[jess-ika]

Hi ! Same issue here

core.es5.js:1020 ERROR ReferenceError: jQuery is not defined
    at GridStackComponent.webpackJsonp.538.GridStackComponent.ngAfterContentInit (index.js:244)
    at callProviderLifecycles (core.es5.js:11170)
    at callElementProvidersLifecycles (core.es5.js:11147)
    at callLifecycleHooksChildrenFirst (core.es5.js:11131)
    at checkAndUpdateView (core.es5.js:12254)
    at callViewAction (core.es5.js:12599)
    at execComponentViewsAction (core.es5.js:12531)
    at checkAndUpdateView (core.es5.js:12257)
    at callViewAction (core.es5.js:12599)
    at execEmbeddedViewsAction (core.es5.js:12557)

My code :

dashboard.component.ts :

import { Component, OnInit, ViewChildren, QueryList, ViewChild, ChangeDetectorRef } from '@angular/core';
import { GridStackItem, GridStackOptions, GridStackItemComponent, GridStackComponent} from 'ng4-gridstack';

@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
    public alerts: Array<any> = [];
    public sliders: Array<any> = [];

    public widget= new GridStackItem();
    @ViewChild('gridStackMain') gridStackMain: GridStackComponent;
    options: GridStackOptions = new GridStackOptions();

    constructor() {
        
    }
    ngOnInit() {
        this.widget.width = 6;
        this.widget.height = 4;
        this.widget.x = 0;
        this.widget.y = 0;
    }

}

My html file :

<grid-stack #gridStackMain class="grid-stack" [options]="options">
    <grid-stack-item [option]="widget" class="grid-stack-item"  >
        blahhh
    </grid-stack-item>
  </grid-stack>

[ramyothman]

Hi, have you included the gridstack.full.min.js in your project index.html or angular-cli.json or angular.json

…

On Wed, Sep 12, 2018 at 6:34 PM jessica curpen ***@***.***> wrote: Hi ! Same issue here core.es5.js:1020 ERROR ReferenceError: jQuery is not defined at GridStackComponent.webpackJsonp.538.GridStackComponent.ngAfterContentInit (index.js:244) at callProviderLifecycles (core.es5.js:11170) at callElementProvidersLifecycles (core.es5.js:11147) at callLifecycleHooksChildrenFirst (core.es5.js:11131) at checkAndUpdateView (core.es5.js:12254) at callViewAction (core.es5.js:12599) at execComponentViewsAction (core.es5.js:12531) at checkAndUpdateView (core.es5.js:12257) at callViewAction (core.es5.js:12599) at execEmbeddedViewsAction (core.es5.js:12557) My code : dashboard.component.ts : import { Component, OnInit, ViewChildren, QueryList, ViewChild, ChangeDetectorRef } from ***@***.***/core'; import { GridStackItem, GridStackOptions, GridStackItemComponent, GridStackComponent} from 'ng4-gridstack'; @component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent implements OnInit { public alerts: Array<any> = []; public sliders: Array<any> = []; public widget= new GridStackItem(); @ViewChild('gridStackMain') gridStackMain: GridStackComponent; options: GridStackOptions = new GridStackOptions(); constructor() { } ngOnInit() { this.widget.width = 6; this.widget.height = 4; this.widget.x = 0; this.widget.y = 0; } } My html file : <grid-stack #gridStackMain class="grid-stack" [options]="options"> <grid-stack-item [option]="widget" class="grid-stack-item" > blahhh </grid-stack-item> </grid-stack> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#4 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACnlBJ01V1zm0ZZ1X_xgPqXA5So5mNARks5uaTepgaJpZM4WYYU6> .

[milanstamenkovic]

Hi! Same issue here

I have added reference to jQuery, lodash and gridstack.all.js as follows

<script src="assets/vendor_scripts/jquery.min.js"></script>  
  <script src="assets/vendor_scripts/lodash.min.js"></script>
  <script src="assets/vendor_scripts/gridstack.all.js"></script>

gridstack.all.js:8 Uncaught ReferenceError: jQuery is not defined
    at gridstack.all.js:8
    at gridstack.all.js:8
(anonymous) @ gridstack.all.js:8
(anonymous) @ gridstack.all.js:8
core.js:13606 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
DashboardComponent.html:46 ERROR ReferenceError: jQuery is not defined
    at GridStackComponent.push../node_modules/ng4-gridstack/index.js.GridStackComponent.ngAfterContentInit (index.js:244)
    at callProviderLifecycles (core.js:18847)
    at callElementProvidersLifecycles (core.js:18828)
    at callLifecycleHooksChildrenFirst (core.js:18818)
    at checkAndUpdateView (core.js:19749)
    at callViewAction (core.js:19986)
    at execComponentViewsAction (core.js:19928)
    at checkAndUpdateView (core.js:19751)
    at callViewAction (core.js:19986)
    at execEmbeddedViewsAction (core.js:19949)

Am I doing something wrong?

Thanks

[ramyothman]

Please Uwe the new library ngx-gridstack

…

On Thu, Nov 22, 2018, 13:45 Milan Stamenkovic ***@***.*** wrote: Hi! Same issue here I have added reference to jQuery, lodash and gridstack.all.js as follows <script src="assets/vendor_scripts/jquery.min.js"></script> <script src="assets/vendor_scripts/lodash.min.js"></script> <script src="assets/vendor_scripts/gridstack.all.js"></script> gridstack.all.js:8 Uncaught ReferenceError: jQuery is not defined at gridstack.all.js:8 at gridstack.all.js:8 (anonymous) @ gridstack.all.js:8 (anonymous) @ gridstack.all.js:8 core.js:13606 Angular is running in the development mode. Call enableProdMode() to enable the production mode. DashboardComponent.html:46 ERROR ReferenceError: jQuery is not defined at GridStackComponent.push../node_modules/ng4-gridstack/index.js.GridStackComponent.ngAfterContentInit (index.js:244) at callProviderLifecycles (core.js:18847) at callElementProvidersLifecycles (core.js:18828) at callLifecycleHooksChildrenFirst (core.js:18818) at checkAndUpdateView (core.js:19749) at callViewAction (core.js:19986) at execComponentViewsAction (core.js:19928) at checkAndUpdateView (core.js:19751) at callViewAction (core.js:19986) at execEmbeddedViewsAction (core.js:19949) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACnlBK3rQVYasqgzNba_gYII5zqFnLAWks5uxpxPgaJpZM4WYYU6> .