Click here to Skip to main content
15,870,165 members
Articles / Web Development / HTML

How to Set Up Environment for Angular 6 with .NET Core 2.1 and Visual Studio 2017

Rate me:
Please Sign up or sign in to vote.
4.77/5 (11 votes)
5 Aug 2018CPOL4 min read 44.9K   409   21   17
Setting Up Environment for Angular 6 in Visual Studio 2017 with ASP.NET Core 2.1

Introduction

This article is all about setting up environment for the most popular SPA (single page application) framework and platform, i.e., Angular. The intended audience for this article is beginners who want to learn Angular and are .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 in a step by step manner. So please bear with me throughout the journey. :)

Background

Angular has evolved a lot since its introduction to the world from its starting version 1.x which then was called AngularJS where we had a simple JavaScript framework that provided 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 to 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 Angular just by referring one file to a 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. Let's 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, I will be using the same. I have installed .Net Core SDK 2.1 as per the latest release. If you have already installed .NET Core SDK 2.0, then there is no need to install but it is better to upgrade.

A prerequisite is that you should have Node.js and Typescript installed on your machine to install packages for Angular and running later.

So, let’s begin with the first step which starts with creating a project in Visual Studio.

Image 1

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

Image 2

Image 3

Try to build your solution before adding Angular 6 to make sure you have everything working fine and there are 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

Image 4

Image 5

After Angular CLI installation, now let's install Angular. Make sure when you run the command at the same place where you have your .csproj file.

ng new ClientApp

Image 6

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

Image 7

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:

JavaScript
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:

JavaScript
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");
    }
});
JavaScript
spa.Options.SourcePath = "ClientApp";

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

Image 8

Since we created an API project from VS 2017, 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:

Image 9

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.

Image 10

It's time to finally build and run the application. Let's see what happens:

Image 11

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 a basic application in Angular in the next article.

I have attached the 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 the prerequisites. If you have setup already, then hit command npm install to restore packages.

History

  • 5th August, 2018: First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Started my career as a Web developer in C#, Asp.Net. Later on worked with MVC, Silverlight, WPF, WCF and Windows Phone 8 development. Also worked on SSRS for the reporting purposes. Keen to learn on latest technologies. Recently worked with backbone.js and AngularJS and Angular. Currently involved in the development using .Net core, Azure and ReactJS with Redux.

http://nitinvshrivastava.com

Comments and Discussions

 
Question500 error Pin
Member 44694313-Apr-19 21:38
Member 44694313-Apr-19 21:38 
AnswerRe: 500 error Pin
NitinShrivastava29-Oct-20 1:06
professionalNitinShrivastava29-Oct-20 1:06 
QuestionDeployment Setting. Pin
Member 122359381-Nov-18 7:30
Member 122359381-Nov-18 7:30 
QuestionHow to load images on Production Pin
venkates81517-Sep-18 23:49
venkates81517-Sep-18 23:49 
QuestionGood Tutorial, I get error. Pin
Member 111971793-Sep-18 16:01
Member 111971793-Sep-18 16:01 
My page says Cannot GET /
Gene Staten

AnswerRe: Good Tutorial, I get error. Pin
Chirag Sorathiya5-Oct-18 0:28
Chirag Sorathiya5-Oct-18 0:28 
QuestionStart from a view Pin
Antxon15-Aug-18 8:06
Antxon15-Aug-18 8:06 
QuestionGood tutorial. Only too alerts! Pin
BDisp6-Aug-18 18:00
BDisp6-Aug-18 18:00 
AnswerRe: Good tutorial. Only too alerts! Pin
NitinShrivastava6-Aug-18 20:22
professionalNitinShrivastava6-Aug-18 20:22 
PraiseGood Article Pin
Member 124395526-Aug-18 10:10
Member 124395526-Aug-18 10:10 
QuestionDeploy? Pin
stuallenii6-Aug-18 3:09
stuallenii6-Aug-18 3:09 
AnswerRe: Deploy? Pin
NitinShrivastava6-Aug-18 6:55
professionalNitinShrivastava6-Aug-18 6:55 
GeneralVery well explain Pin
Punamchand Dhuppad6-Aug-18 0:04
professionalPunamchand Dhuppad6-Aug-18 0:04 
QuestionImages Pin
Blagojce-MKD5-Aug-18 21:03
Blagojce-MKD5-Aug-18 21:03 
AnswerRe: Images Pin
NitinShrivastava5-Aug-18 21:21
professionalNitinShrivastava5-Aug-18 21:21 
QuestionGood Start Pin
Saineshwar Bageri5-Aug-18 18:13
Saineshwar Bageri5-Aug-18 18:13 
AnswerRe: Good Start Pin
NitinShrivastava5-Aug-18 21:21
professionalNitinShrivastava5-Aug-18 21:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.