(#01) ASP.Net Core + Angular 2 = Angular2MultiSPA

These steps will be suitable for someone running  Visual Studio 2015 on Windows. If you use Visual Studio Code, have Linux or a Mac, you can should clone the source from Github here since the following steps require a template currently only in VS2015 for Windows.

First step, get ASP.Net Core web application framework and tools suitable for your platform.

All users (Windows, Linux or Mac) go here: https://www.microsoft.com/net/core
pick your platform, use either Visual Studio 2015 (if you have Windows and want to follow along) or Visual Studio Code (if you have Linux or a Mac).

Tip: Windows users might like to install both Visual Studio 2015 and Visual Studio Code.

Once Visual Studio 2015 is installed, make sure you run it as administrator. (Here’s how)

To start with the code from GitHub, using your favourite GitHub client go to Github here and either clone the project locally to your PC, or download the ZIP.

Alternately, to start from the beginning, In VS2015 click File, New Project, (1) select template type “.NET Core”, (2) pick the project template “ASP.NET Core Web Application (.NET Core)”,then (3) enter the filename, (4) a suitable folder, (5) check the boxes Create Directory and Add to Source Control.vs2015-new-project

then lastly click (6) OK button. Next you will be asked further details:

vs2015-new-project-2

Select (1) Web Application, then leave (2) Authentication as “No Authentication”, for now, (we will add in what we want later, rather than add clutter now), then (3) leave blank and (4) click OK to create the application.

The application will start to download it’s dependencies, or required components:

VS2015 new project 3.png

You can press Ctrl-F5 which will run the IIS Express, to host the application, and launch it to your default web browser(in my case, and for no special reason, it’s Firefox developer edition).

If you have download the code from GitHub, the website will be hosted at port 7010, otherwise it you had created the application yourself, you will see a somewhat random port, and page something like this:

vs2015-new-project-4

The next post, step #2, will cover adding Angular 2 to our ASP.Net Core app.

Advertisements