Angular2 with TypeScript using Visual Studio 2015

Introduction

Recently Angular team released Angular 2 beta (2.0.0-beta.0) version. Compare to previous alpha versions in this release they perform again many changes but great thing is that now they are confident that most developers can be successful building large applications using Angular 2 .

Background

We can get more articles, recordings for investigate Angular2 with TypeScript. Yet, since we need to utilize Angular2 with VS2015. For this situation the things will be somewhat distinctive, So we will talk about here how to setup Angular 2.0 in Visual Studio and compose an exceptionally fundamental example application.

Source code

https://www.dropbox.com/s/2tg4rte0vmjnmnz/Angular2Demo.zip?dl=0

Using the code

For implementation we just need to follow following steps.

 Step 1 – Create a VS (Visual Studio) ASP.NET Web Application

Open Visual Studio 2015 and create an Empty ASP.NET Web Application by just follow below instructions.

File --> New --> Project --> Web --> select a ASP.NET Web Application template. --> OK --> choose ASP.NET 5 Preview template(Empty)

Now, the solution explorer looks like this.

 

 

Now open project.json file an add below code inside dependencies

"dependencies": {
    "Microsoft.AspNet.Server.IIS": "1.0.0-beta6",
    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta6",
     "Microsoft.AspNet.StaticFiles": "1.0.0-beta6"
  },
Colourised in 3ms

 

Now open startup.cs file and replace

public void Configure(IApplicationBuilder app)
        {
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }  
Colourised in 5ms

With following code

public void Configure(IApplicationBuilder app)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }        
Colourised in 4ms

 

Now right click wwwroot and add new item à client side à select html page and create index.html page.

Open index.html page and write 'Hello' then run your basic .net application.

 

Step 2 – Add NPM configuration file

As a .Net developer you may be think that, why we are not using NuGet package?

Answer is here, NuGet is great for server side libraries but when we required client side css and js library then NPM is more rich then Nuget. NPM will provide us client-side runtime assets like jQuery, Bootstrap and AngularJS.

Open application Add new item window then select NPM configuration file  by just follow below instructions and leaving the default name 'package.json' as it is.

Now right click on Application name a client side --> add NPM configuration file by name “package.json”.

 

Now open pakage.json file and replace existing code with following code:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
   "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.1",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.2",
    "typescript": "^1.7.5" 
  }
}        
Colourised in 18ms

 

Step 3 – Add TypeScript configuration file

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript and it offers classes, modules, and interfaces to help you build robust components. It also has generics and lambdas.

The one of the main reason for go with TypeScript is that, it is actually from Microsoft, which means the Angular 2 is give more advantage with TypeScript and .Net.

But still you can use classic js with Angular2 but I would prefer TypeScript with Angular2.

Now right click on Application name à client side --> add TypeScript JSON Configuration File by name “tsconfig.json”.

Now open “tsconfig.json” file and replace existing code with following code.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "wwwroot/app/" 
    },
  "exclude": [
    "node_modules"
  ]
}         
Colourised in 10ms

Note: One imperative thing you have to recall is that by define following instruction we specify js file path. In our case it is required because inside wwwroot files only include in published code.

 "outDir": "wwwroot/app/" // this path define js file path

 

Step 4 – Add TypeScript files

Now right click on Application name and new folder by name “scripts”.

Then after  right click scripts folder à client side --> add TypeScript File by name “app.component.ts”.

Open app.component.ts file and paste following code:

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '<h1>Angular 2 Sample Application</h1>'
})
export class AppComponent { }
Colourised in 3ms

Note: The above ‘export’ statement informed to TypeScript is that this is a module with contain a public class AppComponent and this class is accessible by application other modules.

 

Now right click scripts folder à client side --> add TypeScript File by name “boot.ts”.

Open boot.ts file and add following code:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
Colourised in 2ms

Note: The above "import" articulation educated to TypeScript is that by utilizing this code particular component/module can import from determine way.

 

Step 5 – Include reference  files

Open index.html file and paste following code:

<html>
<head>
    <title>Angular 2 Application</title>
    <!-- 1. Load libraries -->
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script> 

  
<!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'js'}}
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>
Colourised in 16ms

We just completed our first Angular2 sample application with TypeScript and VS2015 :)

Conclusion

In this article, I've given you a look at how Visual Studio and TypeScript will have the capacity to help you for develop Angular 2 application.

Here I am covered only the basic and practical concepts, but if you want to read Angular 2 theory then there are many Angular 2 theory resources available in the community.