We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Angular 2 with Webpack

I have a project where i'm bundling angular 2 and the source of my project with webpack.
As I can see, the "ej.angular2.js" is bundled to a System.js library, now i'm not able to bundle my files with webpack, because webpack cannot resolve System.js libraries.
Is it possible to make the "ej.angular2.js" file consumeable by webpack? Maybe by generating a commonjs version of the library.
With kind regards,

9 Replies

KC Kasithangam C Syncfusion Team July 4, 2016 01:05 PM UTC

Hi Achim, 

Thanks for using Syncfusion Products. 

We have generated “ej.angular2.js” by bundling with a commonjs version of the library which is supported to bundle with webpack. Please find the ej.angular2.js file: 
Script file: ej.angular2.js 

AC Achim.Kotremba July 5, 2016 05:42 AM UTC

Hi Kasithangam,

thanks for the response, i triedto get this running, but i'm not sure how to include it correctly into webpack. 
I always get the the error " Cannot resolve module 'ej/datepicker.component'" when i try to bundle the files.
Can you provide a small example how to use it correctly?

With kind regards,

KC Kasithangam C Syncfusion Team July 8, 2016 12:42 PM UTC

Hi Achim, 
Thanks for your update. 
We have prepared the simple sample by using the ej.angular2.js script file with webpack and please find the sample from the following location: 
Sample: Sample 
Please run the above sample with npm install and npm start commands. Also, please find the below link reference to webpack configuration for angular2 apps: 

AC Achim.Kotremba July 11, 2016 07:05 AM UTC

Hi Kasithangam,

thank you for your example. As I can see, the given example uses a combination of webpack and Systemjs module loader.
Webpack is thought to be an alternative approach to Systemjs.

The main dokumentation of Angular2 uses the Systemjs approach. But the link you provided about the webpack part of Angular2 is made to replace Systemjs.

Is there any possibility to use the Syncfusion library without using Systemjs?


KC Kasithangam C Syncfusion Team July 13, 2016 01:02 PM UTC

Hi Achim, 
Sorry for the inconvenience caused. 
Currently we don’t have support to “Angular2 with webpack without using Systemjs for Syncfusion library”, and we have logged your requirement as a feature request in our database. A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates. 
Please let us know if you have further concern. 

JK John Kim September 30, 2016 03:00 AM UTC

I am also looking forward to see this, as angular-cli recently switched from SystemJS to Webpack and I depend on your widgets for my application.
Please let us know if you have any updates on this.


AS Abinaya Subbiah Syncfusion Team September 30, 2016 11:40 AM UTC

Hi John, 

We have created Webpack sample using our JavaScript components with reference of Angular 2 Webpack official link. And we have attached sample for Accordion component, please refer to the below link for sample. 

Steps to render Syncfusion JavaScript Angular 2 component 
-          Copy the Angular 2 component file(s) of our JavaScript component from the below build (Essential Studio 2016 Volume 3) installed location and paste it into src/ej/ folder in the attached sample. 

(Installed Location)\Syncfusion\Essential Studio\\JavaScript\assets-src\angular2\ 

-          Import the component in src/app/app.module.ts file as like the below code example. 

import { NgModule } from '@angular/core'; 
import { BrowserModule }  from '@angular/platform-browser'; 

import {EJ_ACCORDION_COMPONENTS} from './ej/accordion.component'; 

import { AppComponent } from './app.component'; 
  imports: [ 
  declarations: [ 
  bootstrap: [ AppComponent ] 
export class AppModule { } 

-          Now, we can use the src/app/app.component.ts and src/app/app.component.html files to render our Angular 2 JavaScript components.  

-          Run the below commands to run the sample. 

npm install 
npm start 

-          Browse to http://localhost: 8181 to see the application. You can make changes in the code found under src folder and the browser should auto-refresh itself while you save files. 

We implemented Angular 2 sample browser using our Essential Studio for JavaScript controls. Please refer to the below link for online demo.  

Please let us know if you need further assistance. 

Abinaya S 

DA Dina Abdelbary December 4, 2016 02:13 PM UTC

Please i have version, and Steps to render Syncfusion JavaScript Angular 2 component in the new version differs, as i dont have the path you mentioned to copy the components from, please tell me the steps to import controls ASAP.

AS Abinaya Subbiah Syncfusion Team December 8, 2016 06:15 AM UTC

Hi Dina,  

Thanks for contacting Syncfusion support.  

We are shipping our Essential JavaScript for Angular 2 components source from v14.3.0.39 onwards, since you are unable to locate the components in Essential Studio build installed location.  

We have provided minimal support in the version, so, we strongly recommend you to upgrade to latest Essential Studio release (v14.3.0.39) which seamlessly supports Angular 2 final version 2.0.  

Please let us know if you need further assistance on this.  

Abinaya S 

Live Chat Icon For mobile
Up arrow icon