Tuesday, April 21, 2015

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.


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. 

No comments:

Post a Comment