Angular 2 QuickStart Tutorial Code in an ASP.NET Core Application.

tl;dr: The code is here. The tutorial is there.

Discontinued: This would-be series of articles on Angular 2 has been discontinued This is in favour of a soon to begin alternative series of dotnet based tutorials for Angular 4.

I can’t learn Angular 2 fast enough for my intuition that it will be a lot bigger than Angular 1. There are billions of examples and tutorials out there, most of them inaccurate and contradictory. Not to mention hopelessly out of date with the pace ASP.NET Core has been released at. I decided to stick to the official documentation at Angular first, which is available in TypeScript, JavaScript, and Dart language flavours.  I chose TypeScript because I want to learn it, and both Microsoft and Angular are heavily behind it. It should go places, plus it’s very sweet to use.

The docs start with a tutorial called QUICKSTART, which is a little too minimal, but enough to get started. The classic Hello World pattern. They do build on this in the next tutorial though, Tour of Heroes.

The tutorials, however, are bare minimum sets of files, in effect only the files you would deploy to your web server, and not in a project format for any IDE. QuickStart introduces four core files that nearly all Angular 2 apps need, and I thought it would be interesting, and quite easy, to create a .NET Core Web Application, and just copy those files into the application. About 5 hours later, I had my Hello World working, displaying a sentence on the screen.

There were a few version incompatibilities between frameworks and platforms included in the .NET app, a few other nigglies, but the biggest problem is that, by default, a .NET Core web app will only serve resources its wwwroot folder, and then it will still not serve any static file at all, even from that folder. Request any static file and you get an HTTP  404.

To set this right, I had to add the Microsoft.AspNetCore.StaticFiles package to the project, and add a few lines in Startup.cs. For now, just create a new, empty .NET Core web app, and compare its Startup.cs to mine.

This post is not about the all the little changes I made to get Angular 2 working in the .NET app, but it is to tell you that project is on GitHub if you want to play with Angular 2 in a .NET Core web app, but couldn’t be arsed to spend the time squeezing Angular into Core. The app is available at https://github.com/erisiasoft/Angular2Tutorials, and is a tad untidy, but the important part is the HTML and TypeScript (and JavaScript, if you want) stuff is working, so if you stick to messing about with the TypeScript classes in the app folder, and HTML files in the wwwroot folder, you too can get started on the beginner level Angular 2 tutorials.

This project is not documented yet, so please leave a comment or email me at info@erisia.com if you have any questions. I will post an overview readme as soon as I have found it again, later tonight.

In my next post I will detail the process of fitting Angular 2 to a .NET Core web app, and may proceed onto writing about the Tour of Heroes tutorial, which actually has a proper GUI that does things.