Igniteui-angular2 with angularcli giving error as Cannot read property 'igGrid' of undefined issue

[rishisharma1510]

Hi,
I am trying to use igniteui-angular2 igrid with angularcli. I am using Visual Studio Code as IDE
But when i run the application in the browser in chrome i get error as
Uncaught TypeError: Cannot read property 'igGrid' of undefined
at index.js:185
at __decorate (index.js:10)
at index.js:531
at Object.s (index.js:536)
at webpack_require (bootstrap 7e9d76b…:52)
at Object.489 (app.component.ts:11)
at webpack_require (bootstrap 7e9d76b…:52)
at Object.368 (src async:7)
at webpack_require (bootstrap 7e9d76b…:52)
at Object.618 (main.bundle.js:343)
at webpack_require (bootstrap 7e9d76b…:52)
at webpackJsonpCallback (bootstrap 7e9d76b…:23)
at main.bundle.js:1
(anonymous) @ index.js:185
__decorate @ index.js:10
(anonymous) @ index.js:531
s @ index.js:536
webpack_require @ bootstrap 7e9d76b…:52
489 @ app.component.ts:11
webpack_require @ bootstrap 7e9d76b…:52
368 @ src async:7
webpack_require @ bootstrap 7e9d76b…:52
618 @ main.bundle.js:343
webpack_require @ bootstrap 7e9d76b…:52
webpackJsonpCallback @ bootstrap 7e9d76b…:23
(anonymous) @ main.bundle.js:1

Could anybody help me in this
Srcwithsomerequiredfiles.zip

[rishisharma1510]

Could anybody please help in this issue?

[kdinev]

@rishisharma1510 Hi there. We're sorry that we still haven't been able to get to investigating this issue. We will look at it within the next couple of days and we will update you.

[dkamburov]

@rishisharma1510, you'll have to download include references to igniteui into scripts in angular-cli.json file:

"scripts": ["../node_modules/jquery/dist/jquery.min.js",
		"../node_modules/jqueryui/jquery-ui.min.js",
		"../igniteui/infragistics.core.js", "../igniteui/infragistics.lob.js" ]

Note that reference to jquery-ui is also required

[roscheld]

Hello,

I have the same issue but I already added the items to my angular-cli.json

Here is my angular-cli.json. I started from a clean install and just added jquery, jquery-ui and infragistics core and lob.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "ox-aankoop"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/ignite-ui/css/structure/infragistics.css",
        "../node_modules/ignite-ui/css/themes/infragistics/infragistics.theme.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/jquery-ui-dist/jquery-ui.min.js",
        "../node_modules/ignite-ui/js/infragistics.core-lite.js",
        "../node_modules/ignite-ui/js/infragistics.lob-lite.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

The error i'm now getting is:

`Unhandled Promise rejection: Template parse errors:
Can't bind to 'widgetId' since it isn't a known property of 'ig-grid'.
1. If 'ig-grid' is an Angular component and it has 'widgetId' input, then verify that it is part of this module.
2. If 'ig-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
</h1>

<ig-grid [ERROR ->][(widgetId)]='gridId' [(options)]='gridOptions' [(dataSource)] ='gridData'></ig-grid>"): AppComponent@4:9
Can't bind to 'options' since it isn't a known property of 'ig-grid'.
1. If 'ig-grid' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ig-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
</h1>

<ig-grid [(widgetId)]='gridId' [ERROR ->][(options)]='gridOptions' [(dataSource)] ='gridData'></ig-grid>"): AppComponent@4:31
Can't bind to 'dataSource' since it isn't a known property of 'ig-grid'.
1. If 'ig-grid' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'ig-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
</h1>

<ig-grid [(widgetId)]='gridId' [(options)]='gridOptions' [ERROR ->][(dataSource)] ='gridData'></ig-grid>"): AppComponent@4:57 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
Can't bind to 'widgetId' since it isn't a known property of 'ig-grid'.…, _nativeError: ZoneAwareError, __zone_symbol__currentTask: ZoneTask, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'widge…ttp://localhost:4200/polyfills.bundle.js:2813:35)", __zone_symbol__message: "Template parse errors:↵Can't bind to 'widgetId' si…rce)] ='gridData'></ig-grid>"): AppComponent@4:57"} Error: Template parse errors:
Can't bind to 'widgetId' since it isn't a known property of 'ig-grid'.
1. If 'ig-grid' is an Angular component and it has 'widgetId' input, then verify that it is part of this module.
2. If 'ig-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
</h1>

<ig-grid [ERROR ->][(widgetId)]='gridId' [(options)]='gridOptions' [(dataSource)] ='gridData'></ig-grid>"): AppComponent@4:9
Can't bind to 'options' since it isn't a known property of 'ig-grid'.
1. If 'ig-grid' is an Angular component and it has 'options' input, then verify that it is part of this module.
2. If 'ig-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
</h1>

<ig-grid [(widgetId)]='gridId' [ERROR ->][(options)]='gridOptions' [(dataSource)] ='gridData'></ig-grid>"): AppComponent@4:31
Can't bind to 'dataSource' since it isn't a known property of 'ig-grid'.
1. If 'ig-grid' is an Angular component and it has 'dataSource' input, then verify that it is part of this module.
2. If 'ig-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
</h1>

<ig-grid [(widgetId)]='gridId' [(options)]='gridOptions' [ERROR ->][(dataSource)] ='gridData'></ig-grid>"): AppComponent@4:57
    at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3259:33)
    at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:64688:16)
    at new SyntaxError (http://localhost:4200/vendor.bundle.js:5720:16)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:17572:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:47634:68)
    at http://localhost:4200/vendor.bundle.js:47517:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:47517:19)
    at createResult (http://localhost:4200/vendor.bundle.js:47399:19)
    at ZoneDelegate.webpackJsonp.608.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2601:26)
    at Zone.webpackJsonp.608.Zone.run (http://localhost:4200/polyfills.bundle.js:2393:43)
    at http://localhost:4200/polyfills.bundle.js:2980:57
    at ZoneDelegate.webpackJsonp.608.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2634:31)
    at Zone.webpackJsonp.608.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2433:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:2813:35)
consoleError @ zone.js:522
handleUnhandledRejection @ zone.js:527
_loop_1 @ zone.js:562
drainMicroTaskQueue @ zone.js:566
zone.js:524 ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'widgetId' since it isn't …, rejection: SyntaxError, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}`

Thanks in advance!

[dkamburov]

The lite version of Ignite UI does not contain igGrid

"../node_modules/ignite-ui/js/infragistics.core-lite.js",
"../node_modules/ignite-ui/js/infragistics.lob-lite.js"

You need to download and install the full version infragistics.core.js and infragistics.lob.js

[roscheld]

@dkamburov
Thank you very much! Now it works!

Just had to change the css files because I had issues with them see #96 at the bottom.

[roscheld]

Hmm I still have one problem, I can do a normal build but when I want to do a production build it gives an error. See screenshot.

Thanks in advance.

Here is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { IgGridComponent} from 'igniteui-angular2';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    IgGridComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

[dkamburov]

My suggestion would be to check the import statements. IgGridComponent should be imported from index.js while the error says it's trying to import it from index.d.ts.

[roscheld]

Where do I need to change that? I tried doing it like this, but it still gives the same error:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { IgGridComponent} from 'igniteui-angular2/index.js';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    IgGridComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[dkamburov]

Can you demonstrate this in isolated sample with steps to reproduce?

[roscheld]

Here you can download my project:

https://we.tl/tdw2wjT7OF

When I do ng server or ng build in my root folder, everything works fine.
But when I do ng build --prod it get the import error.

The only files I changed I already mentioned in the above posts.

I found this in the other issue but don't know how to apply it. And it's not entirely the same because it does find the file in the server and normal build.

Node can't find the ignite-angular.js file at all. One solution is to rename the igniteui.angular2.js file to index.js, the other one would be to set the main property in the package.json file.

Many thanks for looking into this!

[gulbdoug]

try using ng build --prod --aot=false. I don't think it works with AOT yet.