Getting started with Angular 2 in ASP.NET Core with TypeScript using Visual Studio 2015
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.
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.
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 |
After installation, the restored packages look like below screenshot.
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.
- “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:
Download sample demo here.
