Angular 2 with Webpack

[Achim.Kotremba]

Hello,

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,

Achim

[Kasithangam C]

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 

Regards, 

Kasithangam 

[Achim.Kotremba]

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,

Achim

[Kasithangam C]

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: 

https://angular.io/docs/ts/latest/guide/webpack.html 

Regards, 

Kasithangam 

[Achim.Kotremba]

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?

Thanks,

Achim

[Kasithangam C]

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. 

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents   

Please let us know if you have further concern. 

 

Regards, 

Kasithangam 

[John Kim]

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.

Thanks,

[Abinaya Subbiah]

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. 

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\14.3.0.49\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'; 

@NgModule({ 

  imports: [ 

    BrowserModule 

  ], 

  declarations: [ 

    AppComponent, EJ_ACCORDION_COMPONENTS 

  ], 

  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.  

http://ng2jq.syncfusion.com/  

Please let us know if you need further assistance. 

Regards, 

Abinaya S 

[Dina Abdelbary]

Please i have version 14.2.0.26, 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.

[Abinaya Subbiah]

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 14.2.0.26, 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.  

Regards, 

Abinaya S