Getting Started With Angular 2 Application Using Visual Studio

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 the Angular 2 app, please install the following software.

Prerequisites

Install Visual Studio 2015 update 3 using any one of the following links.

Download Visual Studio 2015 Update 3 - Web Installer

Or

Download Visual Studio 2015 Update 3 - ISO

Install node.js using the following link

Download the 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 the latest version of Typescript for Visual Studio 2015.

Install Typescript for Visual Studio 2015 after downloading.

Create New Project

Open Visual Studio and then create a new project.

Then, select ASP.NET web application from Visual C# -> Web template. Give the project name and click OK.

Select "Empty" from the available templates, 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.

Create Configuration files

Systemjs.config.js is used to load the angular bundles by mapping them to the JavaScript files (compiled by a typescript compiler).

It also tells where to look for the app files like components, modules, and main typescript files.

package.json: Right-click on the solution and add a new JSON file. Name it as package.json.

Add the following code in the 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 a 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 a new JSON file 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 named 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);

Create app folder

Right-click on the solution, add a new folder, and name it “app”. This folder will hold the typescript files like module, component, and main page.

The “app.main.ts” file is used to bootstrap the angular application by calling the module.

app.module.ts: Create a 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 the 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 a new typescript file 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 the 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 follows.

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 a new typescript file named 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);  

Create a webpage to host the application

Create an html file and name it mainpage.html, which hosts the application.

It will act as the start page displayed on the browser with the help of components.

Add the following code in the 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>

Install the packages defined in the package.json and typings.json file.

In order for an angular application to work, we need to install angular packages defined in the package.json and typings.json files.

Right-click on the 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 the 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 to the project.

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 the startup page for the project.

Press F5 to run the project. You will find the output below.

Try to change the text in the “app.component.ts” file, 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 the application.

From GIT.

(or)

From bitbucket.

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