Cannot read property 'NgGrid' of undefined (angular2 - RC5)

[jeffthompson1971]

Note I'm on angular2 RC5* Trying to follow the demo and then the documentation. they are not in sync for one thing so I'm not sure what to do.

Doc only mentions importing the following (nothing about any "NgGridModule"): import { NgGrid, NgGridItem } from 'angular2-grid';

The demo does the following in the app.module file: import { NgGridModule } from 'angular2-grid';

When I do that I get error that NgGridModule is not exported by dist/main.js.

When I try to just add NgGrid, NgGridItem to my declaration in my app.module.ts it builds but then throws

Cannot read property 'NgGrid' of undefined

when it hits this code

// **from NgGrid.module.js** 
var main_1 = require('../main');
var NgGridModule = (function () {
    function NgGridModule() {
    }
    NgGridModule = __decorate([
        core_1.NgModule({
            declarations: [main_1.NgGrid, main_1.NgGridItem, main_1.NgGridPlaceholder],
            entryComponents: [main_1.NgGridPlaceholder],
            exports: [main_1.NgGrid, main_1.NgGridItem]
        }), 
        __metadata('design:paramtypes', [])
    ], NgGridModule);
    return NgGridModule;

It seems the require('../main') returns undefined so main_1 is undefined.

Any idea what's up?

[OnlyAGhost]

Hmm... now I'm using the release version of Angular 2 now so there may be some things that are off. In my app.module I am importing NgGridModule from angular2-grid/dist/main, and I'm importing NgGridModule in my imports group.

[jeffthompson1971]

can you share your code for your importing? I'm still a bit green - new to angular2 and typescript but I really dig it ;)

I tried: import {NgGridModule} from 'angular2-grid/dist/main';

and that didn't make my IDE freak out so seemed right. But then with my buid (Ionic2 app) i have to explicitly call out exports in the rolloup config. So it's like:

plugins: [
    builtins(),
     commonjs({
      namedExports: {
        'node_modules/angular2-highcharts/index.js':['ChartModule', 'Highcharts'],
        'node_modules/immutable/dist/immutable.js':['List'],
        'node_modules/rxjs/Rx.js':['Rx'],
        'node_modules/angular2-grid/dist/main.js': ['NgGrid', 'NgGridItem', 'NgGridModule','NgGridPlaceholder'],

...
  }

And i get this failure ... so seems this main.js file does not export it.

bundle failed: 'NgGridModule' is not exported by node_modules/angular2-grid/dist/main.js

[OnlyAGhost]

Ahh, I've not tried angular 2 grid with Ionic so I am not sure if there is anything weird there.

This is an abbreviated version of my app.module where I removed basically everything

import { AppComponent } from './components/app.component'; import { NgGridModule } from 'angular2-grid/dist/main';

@NgModule({ imports: [ NgGridModule, ], declarations: [ AppComponent, providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }

Did you also setup systemjs for angular2-grid?

[havenotfear]

I was trying to get this to work with Ionic 2 as well. I was able to get it working by doing

var NgGrid = require('../directives/NgGrid').NgGrid;
var NgGridItem = require('../directives/NgGridItem').NgGridItem;
var NgGridPlaceholder = require('../components/NgGridPlaceholder').NgGridPlaceholder;
var NgGridModule = (function () {
    function NgGridModule() {
    }
    NgGridModule = __decorate([
        core_1.NgModule({
            declarations: [NgGrid, NgGridItem, NgGridPlaceholder],
            entryComponents: [NgGridPlaceholder],
            exports: [NgGrid, NgGridItem]
        }),
        __metadata('design:paramtypes', [])
    ], NgGridModule);
    return NgGridModule;
}());

[jeffthompson1971]

thanks! but what file is that from? is that compiled .js file? Can you share what you did exactly in your app.module to pull it in and then what you did the component you used it in?

On Wed, Nov 2, 2016 at 10:27 PM, havenotfear [email protected] wrote:

I was trying to get this to work with Ionic 2 as well. I was able to get it working by doing

var NgGrid = require('../directives/NgGrid').NgGrid; var NgGridItem = require('../directives/NgGridItem').NgGridItem; var NgGridPlaceholder = require('../components/NgGridPlaceholder'). NgGridPlaceholder; var NgGridModule = (function () { function NgGridModule() { } NgGridModule = __decorate([ core_1.NgModule({ declarations: [NgGrid, NgGridItem, NgGridPlaceholder], entryComponents: [NgGridPlaceholder], exports: [NgGrid, NgGridItem] }), __metadata('design:paramtypes', []) ], NgGridModule); return NgGridModule; }());

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/BTMorton/angular2-grid/issues/157#issuecomment-258057642, or mute the thread https://github.com/notifications/unsubscribe-auth/AB7NvqcO_YbFb0G9f804s3mhL_8RAXTwks5q6VSFgaJpZM4Kkkpd .

[jeffthompson1971]

Nevermind I get what you mean. So I used your approach and now at least I can declare it and I'm not getting any more errors. But of course I'm manually editing NgGrid.module.js which will be overwritten if/when I need to re-install npm modules right?

This is the complete file I have now in case it helps anyone (need a pull request probably yeah?)

Updated file: node_modules/angular2-grid/dist/modules/NgGrid.module.js

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var main_1 = require('../main');


var NgGrid = require('../directives/NgGrid').NgGrid;
var NgGridItem = require('../directives/NgGridItem').NgGridItem;
var NgGridPlaceholder = require('../components/NgGridPlaceholder').NgGridPlaceholder;
var NgGridModule = (function () {
function NgGridModule() {
}
NgGridModule = __decorate([
core_1.NgModule({
declarations: [NgGrid, NgGridItem, NgGridPlaceholder],
entryComponents: [NgGridPlaceholder],
exports: [NgGrid, NgGridItem]
}),
__metadata('design:paramtypes', [])
], NgGridModule);
return NgGridModule;
}());

exports.NgGridModule = NgGridModule;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZXMvTmdHcmlkLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7O0FBQUEscUJBQThDLGVBQWUsQ0FBQyxDQUFBO0FBQzlELHFCQUF5RixTQUFTLENBQUMsQ0FBQTtBQU9uRztJQUFBO0lBQTJCLENBQUM7SUFMNUI7UUFBQyxlQUFRLENBQUM7WUFDUixZQUFZLEVBQU0sQ0FBRSxhQUFNLEVBQUUsaUJBQVUsRUFBRSx3QkFBaUIsQ0FBRTtZQUMzRCxlQUFlLEVBQUcsQ0FBRSx3QkFBaUIsQ0FBRTtZQUN2QyxPQUFPLEVBQVcsQ0FBRSxhQUFNLEVBQUUsaUJBQVUsQ0FBRTtTQUN6QyxDQUFDOztvQkFBQTtJQUN5QixtQkFBQztBQUFELENBQTNCLEFBQTRCLElBQUE7QUFBZixvQkFBWSxlQUFHLENBQUEiLCJmaWxlIjoibW9kdWxlcy9OZ0dyaWQubW9kdWxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUsIE1vZHVsZVdpdGhQcm92aWRlcnMgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nR3JpZCwgTmdHcmlkSXRlbSwgTmdHcmlkSXRlbUNvbmZpZywgTmdHcmlkSXRlbUV2ZW50LCBOZ0dyaWRQbGFjZWhvbGRlciB9IGZyb20gJy4uL21haW4nO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6ICAgICBbIE5nR3JpZCwgTmdHcmlkSXRlbSwgTmdHcmlkUGxhY2Vob2xkZXIgXSxcbiAgZW50cnlDb21wb25lbnRzOiAgWyBOZ0dyaWRQbGFjZWhvbGRlciBdLFxuICBleHBvcnRzOiAgICAgICAgICBbIE5nR3JpZCwgTmdHcmlkSXRlbSBdXG59KVxuZXhwb3J0IGNsYXNzIE5nR3JpZE1vZHVsZSB7fSJdLCJzb3VyY2VSb290IjoiL3NvdXJjZS8ifQ==