Microsoft.AspNetCore.SpaTemplates

[Gary Wadden]

Hi

Are there any guidelines for using syncfusion controls with the Microsoft AspNet .Core SPA templates with Angular 2?

Regards

Gary

[Abinaya Subbiah]

Hi Gary Wadden,  

Thanks for contacting Syncfusion support.  

We have created sample using the Microsoft AspNetCore SpaTemplates. Refer to the below link for the sample.   

sample   

Please follow the below steps to integrate Syncfusion Angular components into the application. 

• Create simple application using .NET Web Development and Tool. and run the application to ensure the system environment is properly configured to work with Angular 2 applications.

  

• To install Syncfusion JavaScript and Angular 2 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 syncfusion-javascript and ej-angular2 module into app.modue.ts file.

   

import { NgModule } from '@angular/core';  

import { RouterModule } from '@angular/router';  

import { UniversalModule } from 'angular2-universal';  

import { AppComponent } from './components/app/app.component'  

import { NavMenuComponent } from './components/navmenu/navmenu.component';  

import { HomeComponent } from './components/home/home.component';  

import { FetchDataComponent } from './components/fetchdata/fetchdata.component';  

import { CounterComponent } from './components/counter/counter.component';  

  

import 'syncfusion-javascript/Scripts/ej/web/ej.grid.min';  

import { EJAngular2Module } from 'ej-angular2';  

  

@NgModule({  

    bootstrap: [ AppComponent ],  

    declarations: [  

        AppComponent,  

        NavMenuComponent,  

        . . . .   

    ],  

    imports: [  

        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.  

        . . . .  

        EJAngular2Module.forRoot()  

    ]  

})  

export class AppModule {  

} 

   

• Syncfusion JavaScript Widget needs jQuery to render the control, so import jQuery in ClientApp/boot-client.ts file. If you are using ej.web.all.min file to load all the Syncfusion widgets, we need to install and import dependency jsrender in ClientApp/boot-client.ts file. Run the below command to install jsrender.

  

npm install jsrender --save   

       [boot-client.ts]     

import 'angular2-universal-polyfills/browser';  

import { enableProdMode } from '@angular/core';  

import { platformUniversalDynamic } from 'angular2-universal';  

/** Expose jQuery to window object **/  

import * as $ from 'jquery';  

window['jQuery'] = $;  

window['$'] = $  

import 'jsrender';  

import { AppModule } from './app/app.module';  

import 'bootstrap';  

const rootElemTagName = 'app'; // Update this if you change your root component selector  

   

• Modify the Views/Home/index.cshtml to overcome the issue “call to Node module failed with error: Prerendering failed because of error: ReferenceError: window is not defined” and refer ej themes from dist folder.

   

@{  

    ViewData["Title"] = "Home Page";  

}  

  

<!--To overcome the issue "ReferenceError: window is not defined"-->   

<app asp-ng2-prerender-module="ClientApp/dist/main-server">Loading...</app>   

<!--ej theme reference-->   

<link rel='nofollow' href="~/dist/ej/web/material/ej.web.all.min.css" rel="stylesheet" asp-append-version="true">  

<script src="~/dist/vendor.js" asp-append-version="true"></script>  

@section scripts {  

    <script src="~/dist/main-client.js" asp-append-version="true"></script>  

} 

   

NOTE: For Syncfusion theme reference, we have copied the files into dist folder from node-modules/syncfusion-javscript folder using postinstall script section in pacakege.json file.   

   

• We have rendered ejGrid component in ClientApp/app/components/home/home.component.html file in the attached sample.

   

        [home.component.html]   

<ej-grid [allowPaging]="true" [allowSorting]="true" [dataSource]="gridData"> 

    <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="75" textAlign="right"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="80"></e-column> 

        <e-column field="EmployeeID" headerText="Employee ID" width="75" textAlign="right"></e-column> 

        <e-column field="Freight" width="75" format="{0:C}" textAlign="right"></e-column> 

        <e-column field="OrderDate" headerText="Order Date" width="80" format="{0:MM/dd/yyyy}" textAlign="right"></e-column> 

    </e-columns> 

</ej-grid> 

   

        [home.component.ts]   

import { Component } from '@angular/core'; 

 

@Component({ 

    selector: 'home', 

    templateUrl: './home.component.html' 

}) 

export class HomeComponent { 

    public gridData: any; 

    constructor() { 

        this.gridData = [{ 

            OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, 

            OrderDate: new Date(8364186e5), Freight: 32.38 

        }, 

        { 

            OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, 

            OrderDate: new Date(836505e6), Freight: 11.61 

        }, 

        { 

            OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, 

            OrderDate: new Date(8367642e5), Freight: 65.83 

        }, 

        { 

            OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, 

            OrderDate: new Date(8367642e5), Freight: 41.34 

        }, 

        { 

            OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, 

            OrderDate: new Date(8368506e5), Freight: 51.3 

        }]; 

    } 

} 

   

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

   

dotnet run   

   

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   

[Preethi Nesakkan Gnanadurai]

Hi 

 

Many thanks for your prompt response to my request.  Unfortunately I received an error that I don’t think I can resolve for myself.  See below. 

 

First I installed the 2017.2 release of the Syncfusion controls. 

 

I am running this version of VS2017: 

 

 

I saved and executed the provide sample  and received the error below. 

 

I also followed the included instructions to create a project from scratch with exactly the same result; which was both encouraging and disappointing ☹ 

The only difference was the actual project path on the Module parse line. 

 

Is something missing in my environment or is there another issue? 

 

If you need more information regarding my environment please let me know. 

 

Many thanks 

 

 

Gary 

 

 

Loading... 

ERROR in ./~/syncfusion-javascript/Scripts/ej/web/ej.pager.min.js 

Module parse failed: C:\Users\Gary\Downloads\sample-1742319480\node_modules\syncfusion-javascript\Scripts\ej\web\ej.pager.min.js Assigning to rvalue (10:5715) 

You may need an appropriate loader to handle this file type. 

| *  applicable laws.  

| */ 

| (function(n){typeof define=="function"&&define.amd?define(["./../common/ej.core.min"],n) ……… 

| 

@ ./~/syncfusion-javascript/Scripts/ej/web/ej.grid.min.js 10:51-536 

@ ./ClientApp/app/app.module.ts 

@ ./ClientApp/boot-client.ts 

@ multi event-source-polyfill webpack-hot-middleware/client?path=%2F__webpack_hmr ./ClientApp/boot-client.ts 

[Abinaya Subbiah]

Hi Gary Wadden, 

A support incident has been created under your account and we have answered your queries in that. Please log on to our support website to check for further updates.   

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents   

Regards, 

Abinaya S