Getting Started With Angular 2 Application Using Visual Studio 2015

There are many IDEs available in the market for developing Angular 2 applications, like Sublime Text, Visual Studio Code... etc.

This article explains how to develop Angular 2 applications, using Visual Studio 2015. If you want to use Visual Studio Code IDE to develop Angular 2 applications, I recommend you follow the below link.

Getting started with Angular 2 application using Visual Studio Code

Before getting started to develop Angular 2 app, please install the following software.

1. Prerequisites
   
   
   • Install Visual Studio 2015 update 3 using anyone of the following link.
     Download Visual Studio 2015 Update 3 - Web Installer
     
     Or
     Download Visual Studio 2015 Update 3 - ISO
     
     
   • Install node.js using the following link
     Download Current Latest Version V7.0.0 of Node.js
     
     
   • Install Typescript tool for Visual Studio 2015
     
     Go to Tools -> Extensions and updates
     
   
   
   
   Select Online -> Search for “typescript” -> Download latest version of Typescript for Visual Studio 2015.
   
   
   
   Install Typescript for Visual Studio 2015 after downloading.
   
   
2. Create New Project
   
   Open Visual Studio and then create new project.
   
   
   
   Then, select ASP.NET web application from Visual C# -> Web template. Give project name and click OK. 
   
   Select "Empty" from the available templates and leave the things as they are and click OK to create the project.
   
   
   
   Once the project is created, then it will form the project structure, as shown in the below image.
   
   
   
   
3. Create Configuration files
   
   
   • package.json
     
     Right click on the solution and add new JSON file. Name it as package.json.
     
     
     
     Add the following code in package.json file.
     

     {
       "name": "angular2-demo-visual-studio",
       "version": "1.0.0",
       "description": "QuickStart package.json from the documentation, supplemented with testing support",
       "scripts": {
         "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
         "docker-build": "docker build -t ng2-quickstart .",
         "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
         "pree2e": "npm run webdriver:update",
         "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
         "lint": "tslint ./app/**/*.ts -t verbose",
         "lite": "lite-server",
         "postinstall": "typings install",
         "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
         "test-once": "tsc && karma start karma.conf.js --single-run",
         "tsc": "tsc",
         "tsc:w": "tsc -w",
         "typings": "typings",
         "webdriver:update": "webdriver-manager update"
       },
       "keywords": [],
       "author": "",
       "license": "ISC",
       "dependencies": {
         "@angular/common": "~2.0.1",
         "@angular/compiler": "~2.0.1",
         "@angular/core": "~2.0.1",
         "@angular/forms": "~2.0.1",
         "@angular/http": "~2.0.1",
         "@angular/platform-browser": "~2.0.1",
         "@angular/platform-browser-dynamic": "~2.0.1",
         "@angular/router": "~3.0.1",
         "@angular/upgrade": "~2.0.1",
     
         "angular-in-memory-web-api": "~0.1.1",
         "bootstrap": "^3.3.7",
         "systemjs": "0.19.39",
         "core-js": "^2.4.1",
         "reflect-metadata": "^0.1.8",
         "rxjs": "5.0.0-beta.12",
         "zone.js": "^0.6.25"
       },
       "devDependencies": {
         "concurrently": "^3.0.0",
         "lite-server": "^2.2.2",
         "typescript": "^2.0.3",
         "typings": "^1.4.0",
     
         "canonical-path": "0.0.2",
         "http-server": "^0.9.0",
         "tslint": "^3.15.1",
         "lodash": "^4.16.2",
         "jasmine-core": "~2.5.2",
         "karma": "^1.3.0",
         "karma-chrome-launcher": "^2.0.0",
         "karma-cli": "^1.0.1",
         "karma-htmlfile-reporter": "^0.3.4",
         "karma-jasmine": "^1.0.2",
         "karma-jasmine-html-reporter": "^0.2.2",
         "protractor": "^3.3.0",
         "rimraf": "^2.5.4"
       },
       "repository": {}
     }

     The package.json file contains the dependency packages to be installed in order to work with Angular 2 applications.
     
     
   • tsconfig.json
     
     Create new JSON file and name it as tsconfig.json file, tsconfig file contains code that is used to convert typescript files into javascript.
     
     Add the following code.
     

     {
       "compilerOptions": {
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
         "sourceMap": true,
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "removeComments": false,
         "noImplicitAny": false
       }
     }

     
     
     
   • typings.json
     
     Create new JSON file and name it as typings.json file and add the following code.
     

     {
       "globalDependencies": {
         "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
         "core-js": "registry:dt/core-js#0.0.0+20160725163759",
         "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
         "node": "registry:dt/node#6.0.0+20160831021119",
         "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
       }
     }

   • systemjs.config.js
     
     Create a JavaScript file and name it as systemjs.confg.js and add the following code.
     

     /**
      * System configuration for Angular samples
      **/
     (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',
           '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
     
           // other libraries
           'rxjs':                      'npm:rxjs',
           'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
         },
         // 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'
           },
           'angular-in-memory-web-api': {
             main: './index.js',
             defaultExtension: 'js'
           }
         }
       });
     })(this);

   Systemjs.config.js is used to load the angular bundles by mapping it to the JavaScript files (compiled by typescript compiler) .
   
   It also tells where to look for the app files like components, modules and main typescript files.
   
   
4. Create app folder
   
   Right click on the solution and add new folder and name it as “app”. This folder will hold the typescript file like module, component and main page.
   
   
   
   • app.module.ts
     
     Create new typescript file and name it app.module.ts. Once the file is created It will ask for confirmation, select No.
     
     
     
     Copy the following code in app.module.ts file.
     

     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     
     @NgModule({
         imports: [BrowserModule]
     })
     
     export class AppModule { }

   • app.component.ts
     
     Create new typescript file and name it app.component.ts and add the following code.
     

     import { Component } from '@angular/core';
     @Component({
         selector: 'my-app',
         template: '<h1>Angular 2 app using visual studio 2015</h1>'
     })
     export class AppComponent { }

     Now it’s time we make some changes to app.module.ts file , call the component file we created in the module. A module can hold multiple components.
     
     The class exported (AppComponent) in the component is defined in the @NgModule under declarations and bootstrap.
     
     Change the module file as following.
     

     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 { }

   • app.main.ts
     
     Create new typescript file and name it app.main.ts and add the following code.
     

     import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
     import { AppModule } from './app.module';
     const platform = platformBrowserDynamic();
     platform.bootstrapModule(AppModule);

   
   
   “app.main.ts” file is used to bootstrap the angular application by calling the module.
   
   
5. Create webpage to host the application
   
   Create an html file and name it mainpage.html that hosts the application.
   
   It will act as the start page displayed on the browser with the help of components
   
   Add the following code in mainpage.html file.
   

   <html>
   <head>
       <title>Angular 2 Demo using Visual Studio 2015</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="styles.css">
   
       <!-- 1. Load libraries -->
       <!-- 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>
   
       <!-- 2. Configure SystemJS -->
       <script src="systemjs.config.js"></script>
       <script>
         System.import('app').catch(function(err){ console.error(err); });
       </script>
   </head>
   
   <!-- 3. Display the application -->
   <body>
       <my-app>Loading Angular 2 App using Visual Studio 2015...</my-app>
   </body>
   </html>

   
   
   
6. Install the packages defined in package.json and typings.json file
   
   In order for an angular application to work we need to install angular packages defined in package.json and typings.json file.
   
   Right click on package.json file and restore packages. This will install node_modules and typings folder in the project using npm.
   
   
   
   Wait for some time for the packages to be installed, you can check the status of the packages installed in output tab in visual studio.
   Once the packages are installed, you will find a message as “installing packages complete”
   
   
   
   Click on show files in solution explorer to see the node_modules and typings folder added into the project.
   
   
   
   
7. Edit tsconfig.json file
   
   Edit code in tsconfig.json file and "compileOnSave": true” as shown below:
   

   {
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "moduleResolution": "node",
       "sourceMap": true,
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
       "removeComments": false,
       "noImplicitAny": true,
       "suppressImplicitAnyIndexErrors": true,
       "typeRoots": [
         "node_modules/@types"
       ]
     },
     "compileOnSave": true
   }

   Set mainpage.html as startup page for the project.
   
   
   
   Press F5 to run the project. You will find the output as below.


Try to change the text in “app.component.ts” file and refresh the browser and let me know your comments on what the output is.

If you are interested in downloading the code, please follow the below link and download he application

From GIT.
(or)
From bitbucket.

If you find any issue, let me know in the comments section.