Syncfusion and Angular 2 (4)

[Me]

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?

[Abinaya Subbiah]

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

 

@NgModule({ 

  imports: [ 

    BrowserModule, EJAngular2Module.forRoot() 

  ], 

  declarations: [ 

    AppComponent 

  ], 

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

require('zone.js/dist/zone'); 

 

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; 

  require('zone.js/dist/long-stack-trace-zone'); 

} 

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 

[webpack.common.js] 

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. 

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.    

    

https://help.syncfusion.com/angular-2/gettingstarted/   

   

We also implemented Angular 2 sample browser using our JavaScript Angular 2 components.   

   

http://ng2jq.syncfusion.com/ 

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

Regards,   

Abinaya S 

[Nagarjuna Madupu]

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

[Abinaya Subbiah]

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. 

Regards, 

Abinaya S