Click here to Skip to main content
15,867,860 members
Articles / Web Development / ASP.NET / ASP.NETvNext

Angular2 with TypeScript using Visual Studio 2015

Rate me:
Please Sign up or sign in to vote.
4.00/5 (18 votes)
28 Jan 2016CPOL4 min read 109.6K   24   18
Angular2 sample application with TypeScript and VS2015

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)

Image 1

Now, the solution explorer looks like this.

 

Image 2

 

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

C++
"dependencies": {
    "Microsoft.AspNet.Server.IIS": "1.0.0-beta6",
    "Microsoft.AspNet.Server.WebListener": "1.0.0-beta6",
     "Microsoft.AspNet.StaticFiles": "1.0.0-beta6"
  },

 

Now open startup.cs file and replace

C++
public void Configure(IApplicationBuilder app)
        {
            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }  

With following code

C++
public void Configure(IApplicationBuilder app)
        {
            app.UseDefaultFiles();
            app.UseStaticFiles();
        }        

 

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

Image 3

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”.

 

Image 4

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

C++
{
  "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" 
  }
}        

 

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”.

Image 5

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

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

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”.

Image 6

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

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

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:

C++
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);

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:

C++
<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>

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Hi, I am Samrat Banerjee from India.
I am a Software Engineer working in .net platform.
I love to explore new technologies.

Comments and Discussions

 
QuestionMigrating existing angular 2 site into .net core Pin
Member 1299732812-Feb-17 20:10
Member 1299732812-Feb-17 20:10 
QuestionInvalid zip file Pin
CraigAP27-Nov-16 8:17
CraigAP27-Nov-16 8:17 
QuestionRouter is undefined Pin
luefher17-Jun-16 5:52
luefher17-Jun-16 5:52 
QuestionIndex page does not show anything except "Loading" Pin
Aaanand10-May-16 9:23
Aaanand10-May-16 9:23 
GeneralMy vote of 5 Pin
Elvis Lima7-May-16 13:12
Elvis Lima7-May-16 13:12 
QuestionThe Zip file does not compiled Pin
jdang3-May-16 16:24
jdang3-May-16 16:24 
AnswerRe: The Zip file does not compiled Pin
Aaanand10-May-16 9:17
Aaanand10-May-16 9:17 
QuestionZip file in drop box seems corrupted... Pin
pl.210-Feb-16 2:05
professionalpl.210-Feb-16 2:05 
QuestionHave you consider to post this as a tip? Pin
Nelek28-Jan-16 3:14
protectorNelek28-Jan-16 3:14 
GeneralMy vote of 4 Pin
Santhakumar M24-Jan-16 6:21
professionalSanthakumar M24-Jan-16 6:21 
QuestionSource code? Pin
Jaime Olivares23-Jan-16 10:45
Jaime Olivares23-Jan-16 10:45 
The source code would be helpful for those not interested in performing the steps one by one.
Best regards,
Jaime.

AnswerRe: Source code? Pin
Samrat Banerjee28-Jan-16 2:39
Samrat Banerjee28-Jan-16 2:39 
GeneralRe: Source code? Pin
Jaime Olivares28-Jan-16 17:09
Jaime Olivares28-Jan-16 17:09 
Questionmissing steps Pin
buckrogerz22-Jan-16 11:04
buckrogerz22-Jan-16 11:04 
AnswerRe: missing steps Pin
Dejan Petrovic28-Jan-16 22:49
Dejan Petrovic28-Jan-16 22:49 
QuestionDoes this work with IE ? Pin
ReverseBlade21-Jan-16 5:29
ReverseBlade21-Jan-16 5:29 
AnswerRe: Does this work with IE ? Pin
Samrat Banerjee2-Feb-16 2:56
Samrat Banerjee2-Feb-16 2:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.