Getting started with Angular2 with ASP.NET

This is hello world article we will learn to setup Asngular2 application in ASP.NET Environment. We are using Visual Studio 2015 as IDE. You may use some other but make sure to provide proper setting in “tsconfig.json” file (which we will discuss later on)

 From my personal experience I feel that choosing proper version in angular2 is bit confusing. If you try with beta or RC version some feature may not support. Please make sure to check angular2 version before implementing any new feature.

In this example we are using 2.0.0 version of angular and proper version of dependent components. So let’s start to follow few steps to implement hello world in Angular2.

Step 1) Choose ASP.NET project Template. We could choose ASP.NET Core as well.

Step 2) Add package.json in application. Here is content of package.json file.

{

    "name": "sample app",

    "version": "1.0.0",

    "author": "Sourav Kayal",

    "description": "Just hello World.",

    "scripts": {

        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",

        "tsc": "tsc",

        "tsc:w": "tsc -w",

        "lint": "tslint ./app/**/*.ts -t verbose",

        "lite": "lite-server",

        "typings": "typings",

        "postinstall": "typings install"

    },

    "license": "ISC",

    "dependencies": {

        "@angular/common": "2.0.0",

        "@angular/compiler": "2.0.0",

        "@angular/core": "2.0.0",

        "@angular/forms": "2.0.0",

        "@angular/http": "2.0.0",

        "@angular/platform-browser": "2.0.0",

        "@angular/platform-browser-dynamic": "2.0.0",

        "@angular/router": "3.0.0",

       

        "core-js": "^2.4.1",

        "reflect-metadata": "^0.1.3",

        "rxjs": "5.0.0-beta.12",

        "systemjs": "0.19.27",

        "zone.js": "^0.6.23",

        

        "bootstrap": "^3.3.6"

    },

    "devDependencies": {

        "concurrently": "^2.2.0",

        "lite-server": "^2.2.0",

        "tslint": "^3.7.4",

        "typescript": "^2.0.2",

        "typings": "^1.0.4"

    },

    "repository": {}

}

Step 2) Add tsconfig.json file and here is content.

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": true,

    "suppressImplicitAnyIndexErrors": true

  },

  "compileOnSave": true,

  "exclude": [

    "node_modules",

    "wwwroot",

    "Scripts/app"

  ]

}

The exclude section of this file depends on the IDE where you are developing application. In case of Visual Studio 2015 the setting is like this.

Step 3 ) Add systemjs.config.js file in application and here is the content

/**

 * System configuration for Angular 2 samples

 * Adjust as necessary for your application needs.

 */

(function (global) {

  System.config({

    paths: {

      // paths serve as alias

      'npm:': 'node_modules/'

    },

    // map tells the System loader where to look for things

    map: {

      // our app is within the app folder

      app: 'app',

      // angular bundles

      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',

      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',

      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',

      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',

      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',

      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries

      'rxjs': 'npm:rxjs'

    },

    // packages tells the System loader how to load when no filename and/or no extension

    packages: {

      app: {

        main: './main.js',

        defaultExtension: 'js'

      },

      rxjs: {

        defaultExtension: 'js'

      }

    }

  });

})(this);

In app sub section under packages we have referred main.js file. Which indicates that this file is our entry point of application and load first.

 Step 4) Add typings.json file with this content

{

  "globalDependencies": {

    "core-js": "registry:dt/core-js#0.0.0+20160725163759",

    "node": "registry:dt/node#6.0.0+20160831021119"

  }

}

Here we have complete our environment setup for Angular2. Now we will concentrate on Application setup.

Step 5) Add app.component.ts under app folder and add below content.

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

@Component({

    selector: 'my-app',

    template: '<h1>Hello World :)</h1>'

})

export class AppComponent { }

Step 6) Add app.module.ts file under app folder with below content.

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

import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({

    imports: [BrowserModule],

    declarations: [AppComponent],

    bootstrap: [AppComponent]

})

export class AppModule { };

Step7) Add main.ts file under app folder with below content

import {platformBrowserDynamic}    from '@angular/platform-browser-dynamic';

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

platformBrowserDynamic().bootstrapModule(AppModule);

So the entire directory structure will look like this

Step 8) Add index.html page in application. Here is content of same.

<!DOCTYPE html>

<html>

<head lang="en">

    <base href="/">

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

   

    <!-- Polyfill(s) for older browsers -->

    <script src="node_modules/core-js/client/shim.min.js"></script>

   

    <script src="node_modules/zone.js/dist/zone.js"></script>

    <script src="node_modules/reflect-metadata/Reflect.js"></script>

    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- Configure SystemJS -->

    <script src="systemjs.config.js"></script>

   

    <script>

      System.import('app').catch(function(err){ console.error(err); });

    </script>

</head>

<body>

    <my-app>Welcome.

</my-app>

</body>

</html>

Step 9) Hit F5 and Cheers!!!

PS : Please do not change file name anywhere if you are not aware of subsequent following change. This just hello world guide in Angular2. To understand meaning of code and execution sequence please follow any good tutorial.

Please follow this tutorial to learn basic of Angular2