Search code examples
angularwebpackdatagridsyncfusion

Syncfusion : How to install only Grid component from Syncfusion for Angular

I am working on a Web App which Uses Syncfusion grid to display tabular Data. My App is Webpack based (not CLI). I have followed Getting Started with Webpack guide from Syncfusion website and integrated into my APP.

The grid is showing up as it's supposed to be. The problem is, when I compile the code , the bundle size is about 19MB and almost 13MB is occupied by Syncfusion.

The help I wanted is can anybody please tell me how to install only grid component from syncfusion library? I did't found any solution which helps me to do so.

Package json : { ........... "reflect-metadata": "0.1.10", "syncfusion-javascript": "~15.4.21", "toastr": "2.1.2", "underscore": "1.8.3", "zone.js": "0.8.18", "rxjs": "6.2.2", "rxjs-compat": "6.2.2" ......., }

Included in Vendor.ts : 

import '../../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css';
import '../../node_modules/syncfusion-javascript/Content/ej/web/responsive-css/ej.responsive.css';

Imported in Module.ts file : 

import { EJAngular2Module } from 'ej-angular2'; 
imports: [
    ......
    EJAngular2Module.forRoot(),
   ........
],
Solution

  • You can import the required components alone in Angular application using the below code snippet instead of EJAngular2Module importing, which includes the required modules and their corresponding source alone into Angular application build.

    import { EJ_GRID_COMPONENTS } from 'ej-angular2/src/ej/grid.component';

    We discussed this information in the following article: https://www.syncfusion.com/kb/7861/importing-required-syncfusion-angular-components-to-reduce-bundle-size