Angular CLI build --prod fails when individual componets are imported

[Wojciech Pawlowski]

Hello

Seems there is an issue with production build in Angular 5 (+Angular/cli 1.5):

In order to reduce bundle size we imported only required components (as per KB instructions).
So our feature module looks as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EJ_SCHEDULE_COMPONENTS } from 'ej-angular2/src/ej/schedule.component'
import { EJ_MENU_COMPONENTS } from 'ej-angular2/src/ej/menu.component'
import { EJ_TIMEPICKER_COMPONENTS } from 'ej-angular2/src/ej/timepicker.component'
import { MyMaterialAllModule } from '../shared/ang-materials.all.module'
import { SharedComponentsModule } from '../shared.components/sc.module'
import { NewSfPlannerComponent } from './components/new-planner-component'
import { Dlg_MainSched_EditApp } from './components/dlg-termin.component'
import { Dlg_MainSched_ViewApp } from './components/dlg-termin-view.component'
import { Dlg_DeleteAppointment } from './components/dlg-termin-delete.component'
const COMPONENTS = [  NewSfPlannerComponent, Dlg_MainSched_EditApp, Dlg_MainSched_ViewApp, Dlg_DeleteAppointment,
EJ_SCHEDULE_COMPONENTS, EJ_MENU_COMPONENTS, EJ_TIMEPICKER_COMPONENTS]
@NgModule({
    imports: [ CommonModule, MyMaterialAllModule, SharedComponentsModule],
    declarations: [COMPONENTS],
    exports: [COMPONENTS],
   providers: [],
    entryComponents: [Dlg_MainSched_EditApp, Dlg_MainSched_ViewApp, Dlg_DeleteAppointment    ]
})
export class SyncfusionPlannerModule { }

ng serve     - works fine
ng build     - works fine
ng build  -- prod  fails with following error:

ERROR in Error: Type TimePickerComponent in /home/wojtek/Desktop/sewebmain/node_modules/ej-angular2/src/ej/timepicker.component.d.ts is part of the declarations of 2 modules: SyncfusionPlannerModule in /home/wojtek/Desktop/sewebmain/src/app/planner-syncfusion/syncfusion-planner.module.ts and EJAngular2Module in /home/wojtek/Desktop/sewebmain/node_modules/ej-angular2/src/index.d.ts! Please consider moving TimePickerComponent in /home/wojtek/Desktop/sewebmain/node_modules/ej-angular2/src/ej/timepicker.component.d.ts to a higher module that imports SyncfusionPlannerModule in /home/wojtek/Desktop/sewebmain/src/app/planner-syncfusion/syncfusion-planner.module.ts and EJAngular2Module in /home/wojtek/Desktop/sewebmain/node_modules/ej-angular2/src/index.d.ts. You can also create a new NgModule that exports and includes TimePickerComponent in /home/wojtek/Desktop/sewebmain/node_modules/ej-angular2/src/ej/timepicker.component.d.ts then import that NgModule in SyncfusionPlannerModule in /home/wojtek/Desktop/sewebmain/src/app/planner-syncfusion/syncfusion-planner.module.ts and EJAngular2Module in /home/wojtek/Desktop/sewebmain/node_modules/ej-angular2/src/index.d.ts.

Any idea how to overcome this?

There is no error when we build complete EJAngular2Module  but resulting production bundle size is not acceptable ... (~13MB).

Best regards, Wojtek

[Berly Christopher]

Hi Wojciech, 

 

Thanks for contacting Syncfusion support. 

 

While looked into your query on “Angular CLI  build  --prod fails when individual components are imported”, we suspect that root cause of this issue due to   when  we use combination of component imports like, ‘components from ej-angular2 package’ and ‘components from individual component from ej-angular2 package’ as like below code example in different places of same application. Also, we are suggesting you to import individual component from angular 2 package. This is used to reduce the production bundle size in your application. 

 

import { EJComponents } from 'ej-angular2';   

 

(and)  

 

import { EJ_TIMEPICKER_COMPONENTS } from 'ej-angular2/src/ej/timepicker.component';   

 

So, we are suggesting you to import all Syncfusion Angular Components from individual components source file. Refer to the below code example. 

 

import { EJComponents } from 'ej-angular2/src/ej/core';  

  

import { EJ_TIMEPICKER_COMPONENTS } from 'ej-angular2/src/ej/timepicker.component';   

 

For your convenience, we have prepared the sample based on your requirement. Please get the sample from the below location. 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/134817/ze/Angular-cli-project1952340260 

 

To know more about ng-build—production please refer the below UG Documentation and KB link. 

 

UG Link: https://help.syncfusion.com/angular/gettingstarted/getting-started-angular-cli#ng-build---production 

 

KB Link: https://www.syncfusion.com/kb/7861/importing-required-syncfusion-angular-components-to-reduce-bundle-size 

 

If issue persists, please revert with issue reproducing sample that will help us to provide the exact solution. 

 

Regards, 

Berly B.C

[Wojciech Pawlowski]

Thank you for your support!

We managed to resolve this issue.

Indeed we have imported individual components as advised however problem still persisted.

Finally we found out that the issue was caused by import of ej-angular module in one of lazy loaded feature modules (not needed any longer ...)

So we moved all EJ_..._COMPONENTS imports and declarations + exports to separate Angular module.

Then we import that module to other modules that need access to ej components.

Thank you!

Kind regards

Wojciech

[Berly Christopher]

Hi Wojciech, 

 

Thanks for the update. 

 

We are glad to hear that the reported issue is resolved at your end. Please, let us know if you need any further assistance. We will be happy to help you. 

 

Regards, 

Berly B.C