AOT build when using just few components

[Marko]

Hi,

I recently noticed in your example that you have components are imported like this:

import {EJ_GANTT_COMPONENTS} from "ej-angular2";
@NgModule({
  declarations: [
    AppComponent, EJ_GANTT_COMPONENTS
....

Until now I have this done like this:

import {EJAngular2Module} from "ej-angular2";
@NgModule({
  declarations: [
     EJAngular2Module.forRoot(),
...

My old code make realy big build, so I tried to optimazied it, just like it was in your example.
When I run example with npm start or npm build it works well, but if I wannt to make AOT build, it fail with the following error:

ERROR in Type GanttComponent in ./gantt/node_modules/ej-angular2/src/ej/gantt.component.d.ts is part of the declarations of 2 modules: EJAngular2Module in ./gantt/node_modules/ej-angular2/src/index.d.ts and AppModule in ./gantt/src/app/app.module.ts! Please consider moving GanttComponent in ./gantt/node_modules/ej-angular2/src/ej/gantt.component.d.ts to a higher module that imports EJAngular2Module in ./gantt/node_modules/ej-angular2/src/index.d.ts and AppModule in ./gantt/src/app/app.module.ts. You can also create a new NgModule that exports and includes GanttComponent in ./gantt/node_modules/ej-angular2/src/ej/gantt.component.d.ts then import that NgModule in EJAngular2Module in ./gantt/node_modules/ej-angular2/src/index.d.ts and AppModule in ./gantt/src/app/app.module.ts.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '.\gantt\src'
 @ ./src/main.ts 3:0-74
 @ multi ./src/main.ts

In my previous code with .forRoot(); there is no AOT build errors.
So is there any solution for this?

Regards,
Marko

Attachment: gantt_650e446b.rar

[Punniyamoorthi Elangovan]

Hi Marko 

We have analyzed the code snippets and the error, in your provided code snippets you have again imported the whole angular package with all the components, to import only the Gantt component, please refer the below code snippet. The below code snippet would reduce your build size. 

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 { EJ_GANTT_COMPONENTS } from 'ej-angular2/src/ej/gantt.component'; 

@NgModule({ 

  declarations: [ 

    AppComponent, EJ_GANTT_COMPONENTS 

  ], 

  imports: [ 

    BrowserModule,FormsModule,HttpModule 

  ], 

  providers: [], 

  bootstrap: [AppComponent] 

}) 

export class AppModule { } 

Also in the error, we assume that you have imported the Gantt component in both gantt.component.d.ts and app.module.ts. If so, we suggest you to import the Gantt only in the app.module.ts file. To provide an even better solution, we request you to provide the sample files in your application. 

Regards, 

Punniyamoorthi 

[Marko]

Hi,

I think there came to some missunderstanding.

1. gantt.component.d.ts is in your npm component so it is located inside node_modules, where i should not make a change ( ./node_modules/ej-angular2/src/ej/gantt.component.d.ts ). So I have implemented declaration just in app.module.ts like you suggested in this post or on your example: https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli?cs-save-lang=1&cs-lang=ts#importing-required-syncfusion-angular-components

2. I have code just like you suggested, but there is still build error (so I do not have implemented whole package twice):


But when I tried with code:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { EJAngular2Module } from "ej-angular2";
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    EJAngular2Module.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And run aot (ng build --prod --aot), there did not come to this error, shown on upper image.

If you have any prepared example (not necessary with gantt), where AOT build with Angular CLI works and it has only few components included, I would be glad, if you could share it, since I can not reproduce working code from your tutorial here: https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli?cs-save-lang=1&cs-lang=ts#importing-required-syncfusion-angular-components

Regards,
Marko

Attachment: GanttSample_28207ed2.rar

[Punniyamoorthi Elangovan]

Hi Marko, 

Thank you for your update. 

To overcome the AOT build failure, we suggest you to run the command ‘npm install [email protected]’, and then please run the command ‘ng build --prod –aot’. 

Please refer the below screenshot 

 

 

We have also prepared a sample for your reference, please find the sample link below 

http://www.syncfusion.com/downloads/support/forum/136407/ze/gantt_sample1894582122 

Regards, 

Punniyamoorthi 

[Marko]

Hi,

I see, that there is still missunderstanding. I know that AOT build works if you have EJAngular2Module.forRoot() included in app.module.ts. But this will include all EJ Components and it will made realy big build package. So I have read in your documentation:

and when I change code, which you just send me, to modular like this:

then it still return build error and AOT build dosen't work:


So my question is, if is it possible to make AOT build with importing just required Syncfusion components?

Regards,
Marko

[Marko]

Hi,

I have found bug in my code.
My IDE automaticly made this import:

import {EJ_GANTT_COMPONENTS} from "ej-angular2";

and when I fixed it to this:
import {EJ_GANTT_COMPONENTS} from "ej-angular2/src/ej/gantt.component";

the AOT has pass.

Regards,
Marko

[Punniyamoorthi Elangovan]

Hi Marko, 

Thank you for your update. 

We are glad that your issue has been resolved.  

We have suggested you the same in our previous response, to use the below code snippet for importing only the Gantt component 

 

import { EJ_GANTT_COMPONENTS } from 'ej-angular2/src/ej/gantt.component'; 

 

We have also documented this for importing only the Gantt component, in our UG documentation here. 

Please let us know, if you require any further assistance on this. 

Regards, 

Punniyamoorthi