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

Syncfusion and Angular 2 (4)

Hello,Is latest version of Syncfusion is compatible with  Angular 4 ? Are you going to update your Webpack sample to Angular 4? If no, then how can I install Syncfusion ng2 components into clean Angular 4 Webpack application? For instance, if I would like to install Syncfusion into this Angular 4 project?

3 Replies

AS Abinaya Subbiah Syncfusion Team April 28, 2017 11:15 AM UTC

Hi Mantelisb, 

Thanks for contacting Syncfusion support. 

Refer to the below steps to integrate Syncfusion Angular components into webpack sample. 

  • To install Syncfusion JavaScript Widget and Angular components, run below commands from sample’s root folder. 
npm install syncfusion-javascript --save     
npm install ej-angular2 --save     
npm install --save-dev @types/jquery     
npm install --save-dev @types/ej.web.all     

  • Import ej-angular2 module into app.modue.ts file.

import { NgModule } from '@angular/core'; 
import { BrowserModule }  from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { EJAngular2Module } from 'ej-angular2'; 
  imports: [ 
    BrowserModule, EJAngular2Module.forRoot() 
  declarations: [ 
  bootstrap: [ AppComponent ] 
export class AppModule { } 

  • To render Syncfusion JavaScript widget refer Syncfusion widget file and its dependencies jQuery, jsrender into src/vendor.ts file.

// Angular 
import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/router'; 
// RxJS 
import 'rxjs'; 
// Other vendors for example jQuery, Lodash or Bootstrap 
// You can import js, ts, css, sass, ... 
import * as $ from 'jquery'; 
window['jQuery'] = $; 
window['$'] = $ 
import 'jsrender'; 
import 'syncfusion-javascript/Scripts/ej/web/ej.grid.min' 

NOTE: In the attached sample we have rendered ejGrid component, since we referred ej.grid.min file. For your kind information, this step of including syncfusion-javascript (ej.grid.min) widget source will be handled from our Angular components itself, which will be included in our upcoming Essential Studio  

  • Refer Syncfusion JavaScript theme reference from node_module in src/polyfills.ts file.
import 'core-js/es6'; 
import 'core-js/es7/reflect'; 
import './../node_modules/syncfusion-javascript/Content/ej/web/material/ej.web.all.min.css'; 
if (process.env.ENV === 'production') { 
  // Production 
} else { 
  // Development and test 
  Error['stackTraceLimit'] = Infinity; 

NOTE:  In Syncfusion widget theme we have used CUR type of files. So we have used file-loader to load those files. Run below command to install file loader and refer to the below code snippet to add configuration for loading files. 

npm install --save-dev file-loader 

var webpack = require('webpack'); 
. . . . . 
module.exports = { 
  entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts' 
  resolve: { 
    extensions: ['.ts', '.js'] 
  module: { 
    rules: [ 
      . . . . .  
        test: /\.css$/, 
        include: helpers.root('src', 'app'), 
        loader: 'raw-loader' 
        test: /\.(png|jpg|eot|cur|svg|gif|ttf|woff)$/, 
        loader: "file-loader" 
   . . . . .  

  • Now run application with below command and navigate to http://localhost:8080/  to see the output window. The app will automatically reload if you change any of the source files.

npm start 

Refer to the below link for sample. 

We have also implemented seed applications, to quick-start with Syncfusion JavaScript Angular 2 components. Refer to the below documentation link for getting started with seed application.    
We also implemented Angular 2 sample browser using our JavaScript Angular 2 components.   

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

Abinaya S 

NM Nagarjuna Madupu May 17, 2017 09:11 AM UTC

Do you mean latest version of Syncfusion is compatible with  Angular 4 ?

AS Abinaya Subbiah Syncfusion Team May 18, 2017 10:05 AM UTC

Hi Nagarjuna Madupu, 

Thanks for contacting Syncfusion support. 

We are confirming that the Syncfusion Angular components are compatible with Angular v4.0. We are working towards upgrading our seed application and getting started documentations for our Angular components, which will be available in our upcoming release. 

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

Abinaya S 

Live Chat Icon For mobile
Up arrow icon