CODEWITHSUNDEEP
angularkendo-uikendo-grid
Proxy
Proxy

Reputation: 1138

Issues with a lazy loading kendo grid

Hello i have problem displaying data in a kendo ui grid. It works fine when I load the module directly at application start, but when I try to load it via lazy loading i get this error:

Cannot set property 'stack' of undefined

If I remove the kendo grid from my html then it loads the rest of the page fine, but with the grid it always produces the above error.

I'm assuming the problem is because the gird itself is unidentified at the load time but i do not know where or how to fix it... Also if some other code snippets are required I will post them later on

HTML containg the grid:

 <kendo-grid [data]="gridData"
      [pageSize]="displaySize"
      [skip]="currentPage"
      [pageable]="true"
      [height]="200"
      [sort]="sortArray"   
      [sortable]="{ mode: 'multiple' }"      
      (pageChange)="pageChange($event)"
      (sortChange)="sortChange($event)">
        <kendo-grid-column field="unit" title="Unit" width="100">
        </kendo-grid-column>
        <kendo-grid-column field="startingTime" title="Start Time" width="200">
        </kendo-grid-column>
        <kendo-grid-column field="endTime" title="End Time" width="200">
        </kendo-grid-column> 
         <kendo-grid-column field="coilId" title="Id" width="200">
        </kendo-grid-column>
         <kendo-grid-column field="thicknes" title="Thicknes" width="200">
        </kendo-grid-column>

    </kendo-grid>

Grid module:

    import { CommonModule }       from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { GridModule } from '@progress/kendo-angular-grid';

import {LoadCoil} from "./dataLoadService/loadCoil.service";
import {GridComponent} from "./grid.component";
import {RouterModule} from "@angular/router";

export const routerConfig = [{
        path: '',
        component: GridComponent
    }];

@NgModule({
  declarations: [   
    GridComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule.forChild(routerConfig)
  ],
  exports : [GridComponent],
  providers: [LoadCoil],
  bootstrap: []
})
export  default class AngGridModule { }

Grid component:

  public gridData: GridDataResult ;
    constructor(private _loadCoil : LoadCoil){

    }

    ngOnInit() : void{

        alert("onInit");
        this._loadCoil.getAllCoils().subscribe(coils =>{ this.coils = coils;
            this.gridData = {
                data: this.coils.slice(this.currentPage, this.currentPage + this.displaySize),
                total: this.coils.length};

                alert(this.coils.length);
            for(let i = 0; i < this.coils.length; i++){
                let isFound = false;
                for (let j = 0; j < this.dropDownArray.length; j++){
                    if (this.dropDownArray[j] == this.coils[i].unit){
                        isFound = true;
                        break;
                    }
                }

                if(!isFound){
                    this.dropDownArray.push(this.coils[i].unit);
                }
            }
        }); 

    }

Main app module :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import {RouterModule} from "@angular/router";
import { GridModule } from '@progress/kendo-angular-grid';

export const routeConfig = [{
        path: 'grid',
        loadChildren: './angGrid.module'
    }];

@NgModule({
  declarations: [
    AppComponent,

  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule, RouterModule.forRoot(routeConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Just to remind the problem only occurs when i switched to lazy loading for my module, if I load it at app start it works.

Upvotes: 1

Views: 1737

Answers (1)

Proxy
Proxy

Reputation: 1138

I found out, i was missing my GridModule in the ngmodule import array.

@NgModule({
  declarations: [   
    GridComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule.forChild(routerConfig),
    ***GridModule***
  ],
  exports : [GridComponent],
  providers: [LoadCoil],
  bootstrap: []
})

I have no idea why the error messaging system is so bad in angular or maybe i'm doing something wrong i really don't know anymore

EDIT: i found the reason why i was always getting a general error and it was the zone.js dependency: After i upgraded to the newest version(0.7.6), i got "normal error messages. Maybe it will help someone.

Upvotes: 3

Related Questions