Angular 2 Hello World using Visual Studio

Here is the quickstart for “Angular 2 quickstart” using Visual Studio. With this you can setup and run Angular 2 quickstart in Visual Studio 2017. Please refer to the official Angular 2 Quickstart. This Visual Studio adaption of the Angular 2 Quickstart can be found on my GitHub site.

https://github.com/prasannapattam/angular2-vs2017-quickstart

Here are the step by step details on how to setup Angular 2 project in Visual Studio.

·         Let’s start by creating a new ASP.NET Core project in Visual Studio

·         Use Empty template to create a blank solution

·         Using Nuget install MVC

·         After installing MVC, install static files middleware. This middleware is needed to serve javascript and html pages

·         Build the project to ensure all the dependencies are downloaded

·         Add MVC services in ConfigureServices method in Startup.cs

    services.AddMvc();

·         After that, in Configure method configure Angular 2 startup and MVC (replace the app.Run code)

// to serve index.html as the default page

app.UseDefaultFiles();

// to serve all the javascript, css and other static pages

app.UseStaticFiles();

// configure route for webapi

app.UseMvc(routes =>

{

    routes.MapRoute(

        name: "default",

        template: "{controller}/{action}/{id?}");

});

·         To download all the Angular dependencies using npm add package.json under wwwroot

·         From Angular 2 Quickstart GitHub copy the package.json. In this blog unit testing is not covered. Hence there is no need to include devDependenies. Here is the complete code for package.json

{

  "name": "angular-quickstart",

  "version": "1.0.0",

  "description": "QuickStart package.json from the documentation, supplemented with testing support",

  "keywords": [],

  "author": "Prasanna Kumar Pattam",

  "license": "MIT",

  "dependencies": {

    "@angular/common": "~2.4.0",

    "@angular/compiler": "~2.4.0",

    "@angular/core": "~2.4.0",

    "@angular/forms": "~2.4.0",

    "@angular/http": "~2.4.0",

    "@angular/platform-browser": "~2.4.0",

    "@angular/platform-browser-dynamic": "~2.4.0",

    "@angular/router": "~3.4.0",

    "angular-in-memory-web-api": "~0.2.2",

    "systemjs": "0.19.40",

    "core-js": "^2.4.1",

    "reflect-metadata": "^0.1.8",

    "rxjs": "5.0.1",

    "zone.js": "^0.7.4"

  },

  "repository": {}

}

·        Wait for the packages to be downloaded

·         From Angular 2 Quickstart GitHub copy the following files/folder to the wwwroot folder

o   index.html

o   systemjs.config.js

o   styles.css

o   favicon.ico

o   tsconfig.json

o   app\main.ts

o   app\app.module.ts

o   app\app.component.ts

·         Once you copy the above files, the solution explorer for wwwroot should look like this

·         Build the solution so that javascript files are generated for the typescript files

·         If you get compile error, delete tsconfig.json files under node_modules (not the one we copied). We don’t need to compile the node_modules

·         Once you successfully compiled, run the application.

Voila our first Angular 2 app running in Visual Studio 2017.