Monday, December 26, 2016

Angular 2 Quickstart with Visual Studio 2017 and ASP.NET Core


Here is the quickstart for “Angular 2 quickstart” using Visual Studio 2017. 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. 

7 comments:

  1. Thank you for the article. I followed all steps without issue. However, when running the application I do not see the text 'Hello Angular'. Only see 'Loading the application...' which comes by default in the HTML page. Any thoughts?

    ReplyDelete
    Replies
    1. I suspect that angular javascript files might not be properly loaded. Have you checked the errors in developer tools console. Please post those errors, which can give a clue on what's happening

      Delete
    2. I had the same issue. Turns out you also need to include systemjs-angular-loader.js from the GitHub QuickStart.

      Delete
  2. Very good version angulara! It is very convenient for me to use it in programming

    ReplyDelete
  3. Why do I need ASP.Net MVC or any of the .net infrastructure? I just want to create an HTML5 app with no ASP.Net dependencies. Zero. None.

    I just want to understand the deployment process for a typescript app and get it onto a server running IIS or out to the phone store to publish through Cordova

    ReplyDelete
  4. That is sgood programme to perform my work perfectly and have the result I expect form it.

    ReplyDelete
  5. Such a detailed tutorial, awesome! I have learned a lot of tricks and tips here, you are doing such a great job! Thanks a lot for posting!

    ReplyDelete