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. 

10 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
  6. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete
  7. thanks for helping to deal with the program, long time did not understand what I do with it, but now I understand everything

    ReplyDelete


  8. Hats off to your presence of mind..I really enjoyed reading your blog. I really appreciate your information which you shared with us.
    Angularjs course in chennai

    ReplyDelete