Quick Start Angular 2 with ASP.NET 5

Angular 2 is now on beta and ASP.NET 5 is on RC version. Both of them are almost near to final release. Use these versions for big projects right now is not a quite right decision because they are still being changed a lot. However, we can begin to make some demo projects to get familiar with new syntax and project templates. In this post, I show you how to make your first app with Angular 2 and ASP.NET 5. This post is only about how to configure so that Angular 2 works with ASP.NET 5.

1. Prerequisites

I’m using Visual Studio 2015 Update 2 for creating this demo. If you have other versions maybe the steps behaviour differently.

You need npm to install packages. Download and install it from https://nodejs.org/en/.

1. Steps

1.1 Create ASP.NET 5 project

Create an ASP.NET 5 project with ASP.NET Web API Template.

ASP.NET 5 Project

ASP.NET 5 Project

Set Launch URL to index.html.

Launch URL

1.2 Bower

Right-click on the project and select Add –> New Item…

Bower configuration

Search bower and select Bower Configuration File

Bower Configuration File

After file bower.json was inserted, right-click on the file and select Manage Bower Packages…

Manage Bower Packages

For example, I would like to use bootstrap, just click on bootstrap and install it. After bower finishes the installation, the bower.json file will be updated with new dependencies.

{
  "name": "Android2DotNet",
  "private": true,
  "dependencies": {
  "bootstrap": "3.3.5"
  }
}

Build your project, a new lib folder appears under wwwroot containing bootstrap and jquery dependencies.

lib

1.3 NPM

Right-click on project and Add –> New Item…. Search for npm and select NPM Configuration File

NPM Configuration File

After package.json file was created, add the following content to it.

{
  "version": "1.0.0",
  "name": "Angular2DotNet",
  "private": true,
  "dependencies": {
  "angular2": "2.0.0-beta.15",
  "systemjs": "0.19.26",
  "es6-shim": "0.35.0",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "zone.js": "0.6.10"

  },
  "devDependencies": {
  "gulp": "3.9.1"
  }
}

When package.json is saved, npm will download packages to your project. After npm finishes, check at project folder to see if node_modules folder exists.

node_modules

1.4 Gulp

npm downloads dependencies only to project folder. We have to copy these dependencies to wwwroot folder so that the website can make references and use them. To automate the copy process, I suggest using Gulp to define copy-tasks.

Right-click to project, Add –> New Item…, search for gulp, select Gulp Configuration File

Gulp Configuration File

Add following content to gulpfile.js

/// <binding AfterBuild='copy-deps' />
/*
This file in the main entry point for defining Gulp tasks and using Gulp plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007
*/

var gulp = require('gulp');

gulp.task('default', function () {
  // place code for your default task here
});

var paths = {};
paths.webroot = "wwwroot/lib/";
paths.npmMod = "./node_modules/";
paths.npmLibs = paths.webroot + "node_modules/";

gulp.task("copy-deps:angular2",
  function () {
  return gulp.src(paths.npmMod + 'angular2/bundles/**/*.js', { base: paths.npmMod + 'angular2/bundles' })
  .pipe(gulp.dest(paths.npmLibs + 'angular2'));
  });

gulp.task("copy-deps:systemjs", function () {
  return gulp.src(paths.npmMod + 'systemjs/dist/**/*.*', { base: paths.npmMod + 'systemjs/dist/' })
  .pipe(gulp.dest(paths.npmLibs + 'systemjs/'));
});

gulp.task("copy-deps:es6-shim", function () {
  return gulp.src(paths.npmMod + 'es6-shim/es6-sh*', { base: paths.npmMod + 'es6-shim/' })
  .pipe(gulp.dest(paths.npmLibs + 'es6-shim/'));
});

gulp.task("copy-deps:es6-shim-for-ie", function () {
  return gulp.src(paths.npmMod + 'angular2/es6/dev/src/testing/shims_for_IE.js', { base: paths.npmMod + 'angular2/es6/dev/src/testing/' })
  .pipe(gulp.dest(paths.npmLibs + 'angular2/es6/dev/src/testing/'));
});

gulp.task("copy-deps:reflect-metadata", function () {
  return gulp.src(paths.npmMod + 'reflect-metadata/Reflect.js', { base: paths.npmMod + 'reflect-metadata/' })
  .pipe(gulp.dest(paths.npmLibs + 'reflect-metadata/'));
});

gulp.task("copy-deps:rxjs", function () {
  return gulp.src(paths.npmMod + 'rxjs/bundles/*.*', { base: paths.npmMod + 'rxjs/bundles/' })
  .pipe(gulp.dest(paths.npmLibs + 'rxjs/'));
});

gulp.task("copy-deps:zone", function () {
  return gulp.src(paths.npmMod + 'zone/dist/**/*.*', { base: paths.npmMod + 'zone/dist/' })
  .pipe(gulp.dest(paths.npmLibs + 'zone/'));
});

gulp.task("copy-deps", ['copy-deps:angular2', 'copy-deps:systemjs', 'copy-deps:es6-shim', 'copy-deps:es6-shim-for-ie','copy-deps:reflect-metadata', 'copy-deps:rxjs', 'copy-deps:zone']);

Open Task Runner Explorer

Task Runner Explorer

Be sure that copy-deps task is set to run After Build

Task After Build

Build project. After the build finishes, the npm dependencies should be copied to wwwroot/lib/node_modules.

node_modules

1.5 TypeScript

Angular2 mainly supports TypeScript. I find the syntax of TypeScript easier to read and write than Javascript so I will use TypeScript as the main language to make apps with Angular 2.

Add app folder to wwwroot folder

app

Right-click on app folder, Add –> New Item…, search typescript, and select TypeScript JSON Configuration File.

After file tsconfig.json, add following content to configure TypeScript

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "module": "commonjs",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "outDir": "./",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules"
  ]
}

1.6 Html and Script

1.6.1 Html

Right-click on wwwroot, Add –> New Item…, search Html and select HTML Page

HTML Page

Add following content to index.html

<!DOCTYPE html>
<html>
<head>
    <title>HintDesk</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" />

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="lib/node_modules/es6-shim/es6-shim.js"></script>
    <script src="lib/node_modules/systemjs/system-polyfills.src.js"></script>
    <script src="lib/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

    <script src="lib/node_modules/angular2/angular2-polyfills.js"></script>
    <script src="lib/node_modules/systemjs/system.src.js"></script>
    <script src="lib/node_modules/rxjs/Rx.js"></script>
    <script src="lib/node_modules/angular2/angular2.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            packages: {
                'app': { defaultExtension: 'js' },
                'lib': { defaultExtension: 'js' }
            }
        });
        System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
</head>

<!-- 3. Display the application -->
<body>
    <hd-app>Loading...</hd-app>
</body>
</html>

1.6.2 Scripts

In the same folder of index.html, create 2 TypeScript files main.ts and app.component.ts

main.ts

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>

import {bootstrap}    from "angular2/platform/browser";
import {AppComponent} from "./app.component";

bootstrap(AppComponent);

The main.ts imports 2 things Angular’s bootstrap function and root component AppComponent. The bootstrapping is platform-specific therefore we import from angular2/platform/browser. We seperate main.ts from app.component.ts because we might launch the AppComponent in multiple environments with different bootstrappers.

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'hd-app',
    template: '

<h1>HintDesk First Angular 2 App</h1>


'
})
export class AppComponent { }

AppComponent is the root of the application. Every Angular app has at leas one root component, conventionally name AppComponent. Components are the basic building blocks of Angular applications. A component controls a view through its associated template.

The AppComponent is exported so that we can import it elsewhere in our application, such as in main.ts.

Press F5 to start Debug, if you see the message HintDesk First Angular 2 App then the configuration is correct. If not, then check Console of browser to locate the error, Angular 2 gives the errors pretty informatively back.

Angular 2

2. Source code

Source code: https://bitbucket.org/hintdesk/javascript-dotnet-angular-2

Leave a Reply

Your email address will not be published. Required fields are marked *