I am having build issues when using the Ignite UI w/ an Angular 4 app that I created using the Angular CLI. Here are the steps to reproduce the issue I'm seeing. These steps assume that you have npm and the angular CLI installed.
1) Using the Angular CLI, create a test app:
ng new ignite-sample
2) Install this package.
npm install enhanced-resolve@3.3.0 --save
3) Verify that the build is successful.
ng build --prod
4) Install the IgniteUI packages
npm install ignite-ui --save npm install igniteui-angular2 --save
5) Add the following imports to update app.module.ts:
The build will fail with this error:
ERROR in Type IgGridComponent in C:/temp/ignite-sample/node_modules/igniteui-angular2/index.d.ts is part of the declarations of 2 modules: IgniteUIModule in C:/temp/ignite-sample/node_modules/igniteui-angular2/index.d.ts and AppModule in C:/temp/ignite-sample/src/app/app.module.ts! Please consider moving IgGridComponent in C:/temp/ignite-sample/node_modules/igniteui-angular2/index.d.ts to a higher module that imports IgniteUIModule in C:/temp/ignite-sample/node_modules/igniteui-angular2/index.d.ts and AppModule in C:/temp/ignite-sample/src/app/app.module.ts. You can also create a new NgModule that exports and includes IgGridComponent in C:/temp/ignite-sample/node_modules/igniteui-angular2/index.d.ts then import that NgModule in IgniteUIModule in C:/temp/ignite-sample/node_modules/igniteui-angular2/index.d.ts and AppModule in C:/temp/ignite-sample/src/app/app.module.ts.
I have attached a zipped project. To reproduce the issue, run these steps:
1) npm install (to re-hydrate the modules)
2) ng build --prod
Any help that you can provide would be appreciated.
Hello Tory,
Thank you for the detailed explanation of your issue. I appreciate it.
To start with I want to clarify that the command:
`npm install ignite-ui --save`
will install Ignite UI OSS which doesn't contain Grids and Data Visualization controls. What you need to do in order to use the Grids is to copy the licensed Ignite UI source code in a folder in your project and reference it from there.
Looking at the compile error I suggest you to remove the Infragistics components from the declaration section of the "app.module.ts" file and instead import the "IgniteUIModule".
I'm attaching a new project setup with the Ignite UI grid. Unfortunately it throws an error when I try to compile it using `ng build --prod`, but it should work with `ng serve`. I'm looking into the issue and will update you with my progress.
Best regards,Martin PavlovInfragistics, Inc.
Hi Martin,
Thanks for the speedy reply! I understood everything you said. With your suggestion, we were able to get the IgGrid to show when doing an 'ng serve' (screenshot attached).
However, as you noted, 'ng build --prod' is still giving an error. I'll be looking forward to your update.
Thanks! Tory.
I found the problem. The version of "enhanced-resolved" on my side was 3.4.1. After pinning it to 3.3.0 the `ng build --prod` did run successfully.To check the version of "enhanced-resolve" on your side execute the following command `npm list | grep 'enhanced'`.
I tried making the suggested change, but I still get the same build error when I run `ng build --prod`. Instead of attaching a sample app as before, I've attached our real app. Can you give it a try?
After downloading the zip file...
1) run 'npm install' to rehydrate the packages
2) copy the ignite ui distribution into the following directories. We are using 2016.1. I'm not sure if that matters.
misc_modules\ignite-ui\cssmisc_modules\ignite-ui\js
.angular-cli.json has the following references...
"styles": [ "styles.css", "./assets/css/font-awesome.css", "../misc_modules/ignite-ui/css/structure/infragistics.css", "../misc_modules/ignite-ui/css/themes/infragistics/infragistics.theme.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/jquery-ui-bundle/jquery-ui.min.js", "../node_modules/bootstrap/dist/js/bootstrap.js", "../misc_modules/ignite-ui/js/infragistics.core.js", "../misc_modules/ignite-ui/js/infragistics.lob.js", "../node_modules/spin.js/spin.js" ],
Thanks again for your help. Tory.
There were two issues when I tried to run the project for production.
The first one is that I had to import the "IgniteUIModule" in the app.module.ts. This is because the production mode is compiling for AOT and thus it throws duplicate declarations for the Ignite UI components that are referenced in the app.module.ts declarations section.
I also had to change all the private members across the application to be public. The AOT compilation complained about those members not being accessible.
I'm attaching the modified sample.
Your suggestions fixed my build issues! Thanks so much for your help!
Take care. Tory.
You're welcome!