Webpack solution for SystemJS mapping

Question

The release of AngularCLI abandon SystemJS in favor of WebPack.

However SyncFusion hasn't supported WebPack yet in there EJ2 library for Angular. They instruct to use SystemJS to map

"@syncfusion/ej2-grids": "node_modules/@syncfusion/ej2-grids/dist/ej2-grids.umd.min.js",
"@syncfusion/ej2-ng-grids": "node_modules/@syncfusion/ej2-ng-grids/dist/ej2-ng-grids.umd.min.js",

in this tutorial http://ej2.syncfusion.com/angular/documentation/grid/getting-started.html#configuring-system-js

How can I work around this dependency and make it compatible with WebPack while waiting for SyncFusion to support it?

Answer 1

Same thing is done in Webpack with resolve.alias:

...
resolve: {
  alias: {
    "@syncfusion/ej2-grids$": "@syncfusion/ej2-grids/dist/ej2-grids.umd.min.js",
    ...
}

The reason why mappings are used in SystemJS is that a single prebuilt UMD file can be transferred instead of transfering and building separate files. This is not an issue for Webpack. While UMD module can speed up the process a bit, using unbundled ES6 modules from a package (if available) allows to use tree shaking and may reduce application footprint.

Answer 2

Essential JS2 Angular components have Webpack support without any workaround. Please find the code snippet

var webpack = require('webpack');
module.exports = {
entry: {
    'app': './app/main.ts'
},

resolve: {
    extensions: ['.js']
},
output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'app.js',
}
};

webpack sample link: https://github.com/Madhust/ej2-grid-angular-webpack