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?
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.
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
