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

Syncfusion and Angular 2 (4)

Thread ID:

Created:

Updated:

Platform:

Replies:

130214 Apr 28,2017 07:17 AM UTC May 18,2017 10:05 AM UTC Angular 3
loading
Tags: General
Me
Asked On April 28, 2017 07:31 AM UTC

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 [Syncfusion]
Replied On 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'; 
 
@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. 


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.   

Regards,   
Abinaya S 


Nagarjuna Madupu
Replied On May 17, 2017 09:11 AM UTC

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

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

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

;