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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular 2 with Webpack

Thread ID:

Created:

Updated:

Platform:

Replies:

124797 Jun 30,2016 12:11 PM UTC Dec 8,2016 06:15 AM UTC JavaScript 9
loading
Tags: General
Achim.Kotremba
Asked On June 30, 2016 12:11 PM UTC

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 [Syncfusion]
Replied On 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 
Regards, 
Kasithangam 


Achim.Kotremba
Replied On 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,
Achim

Kasithangam C [Syncfusion]
Replied On 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: 
Regards, 
Kasithangam 


Achim.Kotremba
Replied On 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?

Thanks,
Achim

Kasithangam C [Syncfusion]
Replied On 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. 
 
Regards, 
Kasithangam 


John Kim
Replied On 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.

Thanks,

Abinaya Subbiah [Syncfusion]
Replied On 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\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.  


Please let us know if you need further assistance. 

Regards, 
Abinaya S 


Dina Abdelbary
Replied On December 4, 2016 02:13 PM UTC


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 [Syncfusion]
Replied On 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 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;