Introduction

This article is all about setting up environment for most popular SPA(single page application) framework and platform i.e. Angular. The intended audience for this article is the beginners who want to learn Angular and are dot net developers. Since it is from the beginner’s perspective I am starting with how to setup environment for angular in Visual Studio 2017. Eventually we will be going through all the features of angular step by step. So please bear with me throughout the journey. 🙂

Background

Angular has been evolved a lot since its introduction to world from its starting version 1.x which then was called AngularJS where we had a simple JavaScript framework that provides developers to extend HTML DOM elements with additional attributes to perform user actions. Earlier when we had to use AngularJS in any project then we just had to refer one JS file and we could easily use the features of AngularJS. Later on, Angular was launched with version 2 which was a complete architectural shift and different from AngularJS 1.x. Angular has been launched recently with a newer version 6 which inherits the same architecture as started with Angular 2 with additional features and functionalities.

Now we cannot use the Angular just by referring one file to project because of modularity which in fact is good. So whatever module we want to use we can import and use within that component.

It requires a completely different setup to work. Especially when we are working with Visual Studio and Asp.Net core. Lets proceed with steps to achieve our goal.

Setting Up

In this section we are going to setup environment for Angular in Visual Studio 2017. Since Angular works well with ASP.Net Core which has already provided Middleware, Classes and Methods to cope up with SPA frameworks so I will be using the same. I have installed .Net Core SDK 2.1 as per the latest release. If you already have installed .Net Core SDK 2.0 then no need to install but better to upgrade.

Prerequisite is you should have Node.js and Typescript installed on your machine to install packages for angular and running later.

So, let’s begin with first step which starts with creating a project in visual studio.

I am selecting Web API project here so that I get an empty project without Views or prior setup.

Try to build your solution before adding Angular 6 to make sure you have everything is working fine and no issues with any dependencies.

Now, let’s add Angular 6 application to this project through Angular CLI. To do so, open command prompt and navigate to folder where you have your project created. In my case I added to BookStore folder so here you can run your command to install angular cli.

npm install -g @angular/cli

After Angular CLI installation now lets install angular. Make sure when you run the command at the same place where you have your .csproj file.

ng new ClientApp

After command runs successfully you will find your solution as below.

Using the code

To successfully run our application, we need to make few changes in the C# code.

Add middleware to support SPA in .Net Core App. And to do that, open Startup.cs and register the SPA service that can provide static files to be served for a Single Page Application (SPA). So we add this to ConfigureServices method:

	services.AddSpaStaticFiles(c =>
            {
                c.RootPath = "ClientApp/dist";
            });

c.RootPath = “ClientApp/dist” defines where your all static files will be dumped. Now the question arises why do we need this path if we already have wwwroot which is meant to hold static files in .Net Core. This topic will be captured once we come to our final build and deployment step later in the series.

After this to support SPA files .Net Core provides middleware and we have to add these in configure method

            app.UseStaticFiles();
            app.UseSpaStaticFiles();
            app.UseMvc(routes =>
            {
                routes.MapRoute(name: "default", template: "{controller}/{action=index}/{id}");
            });
            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501
                spa.Options.SourcePath = "ClientApp";
                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });

spa.Options.SourcePath = "ClientApp";

This will ensure that all the static contents are going to load from ClientApp folder.

Since we created an API project from VS 2017 so we need to update launch settings from Properties/launchsetting.json. Remove launch url key value

"launchUrl": "api/values", and save the file.

If you are running your application on IE10, IE 11 then you might encounter an error with vendor.js or polyfill.js.  Like this:

To overcome this issue and run on IE 10, IE 11 which I prefer because it helps in easy debugging. Go to polyfills.ts file and un-comment the sections related to IE.

Its time to finally build and run application. Lets see what happens:

Voila!!! it works.

Summary

In this article we learnt how to setup Angular in Asp.Net core application with Visual Studio 2017. There was a catch running application on IE browser which we had to identify and update polyfills.ts. This is the first step to begin our journey with Angular. We got our environment ready and now we shall move with understanding and creating basic application in angular in the next article.

I have attached solution excluding node_modules folder. So if you want to run the same on your machine then make sure you have things ready as per prerequisite. If you have setup already then hit command npm install to restore packages.