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

Getting started with Angular 2 in ASP.NET Core with TypeScript using Visual Studio 2015

Platform: JavaScript |
Control: General |
Published Date: August 25, 2016 |
Last Revised Date: May 8, 2019

Setup Environment

The following pre-requisites are needed to getting started with Angular 2 application ­­­­­in ASP.Net MVC 6.

Visual Studio 2015: If you already have a copy of Visual Studio 2015 installed, you need to update Visual Studio 2015 with Update 3.

Or

Download Visual Studio Community 2015 for free.

.NET Core: You need to install .NET core, which can be downloaded from the following link:

.NET Core 1.0.0 - VS 2015 Tooling Preview 2 (Run apps with the .NET Core runtime).

Create an empty ASP.NET Core project

Open Visual studio 2015 and select ASP.NET core web Application and name it as “ESAngular2Demo” and select “Empty” project template. 

Template

 

Empty Project

Creating simple web page

Let’s create HTML file named index.html under wwwroot” folder.

Right click on wwwroot” folder and select “Add New Item” option then create index.html file. This HTML page will act as default page. Copy below code into html page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular 2 with ASP.NET Core</title>
</head>
<body>
<h1>Demo of Angular 2 using ASP.NET Core with Visual Studio 2015</h1>
</body>
</html>

 

For ASP.NET Core to serve static files, we need to add StaticFiles middleware in Configure method of Startup.cs page.

project.json is redesigned to make it better, we have Static Files middleware to serve static assets like HTML, JS files etc.

[Startup.cs]

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseDefaultFiles();
app.UseStaticFiles();
}

 

Add below package to the project.json file for using static files.

[project.json]

{
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.0.0",
"type": "platform"
},
"Microsoft.AspNetCore.Diagnostics": "1.0.0",
 
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
"Microsoft.Extensions.Logging.Console": "1.0.0",
"Microsoft.AspNetCore.StaticFiles": "1.0.0"
},
"tools": {
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final"
},
"frameworks": {
"netcoreapp1.0": {
"imports": [
"dotnet5.6",
"portable-net45+win8"
]
}
},
"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true
},
"runtimeOptions": {
"configProperties": {
"System.GC.Server": true
}
},
"publishOptions": {
"include": [
"wwwroot",
"web.config"
]
},
"scripts": {
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}

 

Now right click on project “ESAngular2Demo” and choose Restore Packages to restore the required packages. Then Build and run project it will render the html page.

Nugets

 

Start with Angular 2 in ASP.NET Core

Before start Angular 2 in ASP.NET Core refer 5 MIN QUICK START for getting started with Angular 2.

Adding NPM Configuration file for Angular 2 packages

Right Click on “ESAngular2Demo “, add new file “NPM Configuration File “, by default package.json is added to ASP.NET Core project. This acts Node Package Manager (NPM) file, which is must for adding packages for Angular 2 application.

Add the below Typescript configuration (tsconfig.json) and typings.json files by right click the project “ESAngular2Demo”and choose Typescript JSON configuration file.

[tsconfig.json]

{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"noEmitOnError": true,
"outDir": "../wwwroot/appScripts/"
},
"exclude": [
"node_modules",
"typings",
"wwwroot/libs",
"deps"
]
}

 

[typings.json]

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504",
"jquery": "registry:dt/jquery#1.10.0+20160704162008"
}
}
 

 

Copy and paste below configuration in package.json file.

[package.json]

{
"version": "1.0.0",
"name": "esangular2demo",
"scripts": {
"postinstall": "typings install",
"typings": "typings"
},
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"systemjs": "0.19.27",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"core-js": "^2.4.0",
"angular2-in-memory-web-api": "0.0.14"
},
"devDependencies": {
"typescript": "^1.8.10",
"gulp": "^3.9.1",
"path": "^0.12.7",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-typescript": "^2.13.6",
"typings": "^1.3.1",
"gulp-tsc": "^1.2.0"
}
}

 

After saving this, Visual Studio starts restoring the packages. It would download all the packages mentioned in the above package.json.

If packages are not restored properly, right click the project and open in Windows Explorer and install node packages using command prompt. Run the below command in project location.

npm install

 

Npm Nugets

 

After installation, the restored packages look like below screenshot.

Npm install

Moving files using GULP

After NPM install of Angular 2 in ASP.NET Core project, notice node_modules folder has all packages needed.

wwwroot is web root folder, so it’s essential to move all needed files to this folder. In index.html we can refer them from this location.

Right Click on “ESAngular2Demo” project, add new “Gulp Configuration File” naming it gulpfile.js and copy below code into it.

[gulpfile.js]

/// <binding />
var ts = require('gulp-typescript');
var gulp = require('gulp');
var clean = require('gulp-clean');
 
var destPath = './wwwroot/libs/';
 
// Delete the dist directory
gulp.task('clean', function () {
return gulp.src(destPath)
.pipe(clean());
});
gulp.task("scriptsNStyles", () => {
gulp.src([
'core-js/client/**',
'systemjs/dist/system.src.js',
'reflect-metadata/**',
'rxjs/**',
'zone.js/dist/**',
'@angular/**',
'jquery/dist/jquery.*js',
'bootstrap/dist/js/bootstrap.*js'
], {
cwd: "node_modules/**"
})
.pipe(gulp.dest("./wwwroot/libs"));
});
var tsProject = ts.createProject('scripts/tsconfig.json');
gulp.task('ts', function (done) {
//var tsResult = tsProject.src()
var tsResult = gulp.src([
"scripts/*.ts"
])
.pipe(ts(tsProject), undefined, ts.reporter.fullReporter());
return tsResult.js.pipe(gulp.dest('./wwwroot/appScripts'));
});
gulp.task('watch', ['watch.ts']);
 
gulp.task('watch.ts', ['ts'], function () {
return gulp.watch('scripts/*.ts', ['ts']);
});
gulp.task('default', ['scriptsNStyles', 'watch']);

 

Adding Typescript Configuration file

Include Typescript Configuration file which does work of transpiling typescript files into JavaScript.

Create “scripts” folder under root of project “ESAngular2Demo” and add Typescript configuration (tsconfig.json) and typings.json files into it. Copy below code snippet and paste it into the corresponding files.

[tsconfig.json]

{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "system",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../wwwroot/appScripts/",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"typings",
"wwwroot/libs"
]
}

 

[typings.json]

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}

 

Adding EJ Components

Create app.component.ts and main.ts files under scripts folder. Copy below code into typescript files to render ejDialog components.

[app.component.ts]

/// <reference path="../ej/ej.angular2.d.ts" />
import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '@angular/common';
import {EJ_DIALOG_COMPONENTS} from 'ej/dialog.component';
 
@Component({
selector: 'ej-app',
template: `<div id="parent">
<ej-dialog title="Facebook" containment="#parent">
Facebook is an online social networking service headquartered in Menlo Park, California.
Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.
The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University.
It gradually added support for students at various other universities and later to high-school students.
</ej-dialog>
</div>`,
directives: [EJ_DIALOG_COMPONENTS],
})
export class AppComponent {
}

 

[main.ts]

///<reference path="./../typings/globals/core-js/index.d.ts"/>
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

 

After finished above two steps run default gulp task once, which is in “Task Runner Explorer”, otherwise the below mentioned folders will not be created.

Gulpfile

 

  • appScripts folder containing transpiled Typescript files.
  • libs folder has all Angular 2 package files needed to get started. We used Gulp tasks to achieve this.

Add systemjs.config.js file under “wwwroot” folder to load Angular 2 script files.

[systemjs.config.js]

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'appScripts', // 'dist',
        '@angular': 'libs/@angular',
        'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
        'rxjs': 'libs/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated'
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
    };
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    }
    System.config(config);
})(this);

 

Adding HTML file

In index.html file copy below code to render “Dialog” component. Create “deps” folder under “wwwroot” and add all EJ dependencies scripts and css files under deps folder.

[index.html]

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JavaScript for Angular 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="shortcut icon" type="image/png" href="deps/css/images/browser-logo.png">
<link href="deps/css/ej/default-theme/ej.web.all.min.css" rel="stylesheet" />
<link href="deps/css/bootstrap.min.css" rel="stylesheet">
<link href="deps/css/ej/ribbon-css/ej.icons.css" rel="stylesheet" />
 
<script src="libs/core-js/client/shim.min.js"></script>
<script src="libs/zone.js/dist/zone.js"></script>
<script src="libs/reflect-metadata/Reflect.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
 
<script src="deps/js/jquery-1.11.3.min.js"></script>
<script src="deps/js/jquery.easing.1.3.min.js"></script>
<script src="deps/js/jsrender.min.js"></script>
<script src="deps/js/ej.web.all.min.js"></script>
<script src="deps/js/ej.angular2.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('appScripts/main').catch(function (err) {
console.error(err);
});
</script>
</head>
 
<!-- 3. Display the application -->
 
<body>
<ej-app>Loading...</ej-app>
</body>
</html>    

 

Finally, you will get following output:

output

Download sample demo here.

ADD COMMENT
You must log in to leave a comment
Comments
Eric Brunner
Feb 04, 2017
Is there no easier way to incooperate EJ into a VS2015 project?  Reply
Eric Brunner
Feb 04, 2017
Is there no easier way to incooperate EJ into a VS2015 project?  Reply
Abinaya Subbiah [Syncfusion]
Mar 02, 2017

Hi Eric,

 

Thanks for your interest Syncfusion Products.

 

We are working on improvement in our UG documentation to reduce the steps to configure Angular 2 application in Visual Studio environment. We are also working on to implement the Visual Studio Templates which is helpful to create the entire configuration in single shot.

 

Regards,

Abinaya S

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

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