Create An Application With Angular 6 And .Net Core: Step By Guide – Neel Bhatt Core

User Manual:

Open the PDF directly: View PDF .
Page Count: 12

Stack Overflow

Buy me a coffee

Blog Stats

441,607 hits

Ranked as one of the Top

60 .Net blogs on the

internet by Feedspot



This is an awesome security

product on which I am

working currently. Check it

out.

About Contact Me Top posts .Net Core Machine Learning Angular .Net core Guest posts﴾paid﴿

Create an application with

Angular 6 and .Net Core: Step by

step guide

Neel

.Net Core, .Net Core 2.1, Angular .Net, Angular .Net core, Angular .Net core 2.0, Angular 6 .Net Core, Angular

Visual studio, ASP .Net Core, ASP .Net Core 2.0, Asp .Net Core 2.1, asp.netcore2.0, Core 2.0, Visual Studio 2017

June 2, 2018 2 Minutes

Angular 6 is announced recently which has introduced some pretty awesome features.

Let us see how to create Angular 6 application with and without using .Net Core

SPA templates using Visual Studio 2017.

There are more than one ways to create Angular 6 application with .Net Core, Let

us see some of them.

Make sure you have instilled Visual Studio 2017 & .Net Core latest SDK and of

course Node & Angular CLI.

Without using SPA Template

In this approach we will not use any template and will add Angular 6 within an

API project.

Create the Angular application using .Net Core 2.0 template in

VS 2017

Once you have all these installed, open your Visual Studio 2017 -> Create New Project -

> Select Core Web application:









REPORT THIS AD

Neel Bhatt

The product on which I am working

currently

Follow Blog via Email

Enter your email address to

follow this blog and receive

notifications of new posts by

email.

Enter your email address

Search …

Select Language

Archives

November 2018

October 2018

September 2018

August 2018

July 2018

June 2018

May 2018

April 2018

March 2018

February 2018

Click on Ok and in next window, select API as shown below:

Once the API project is created, open Command prompt and navigate to the project

folder -> run command:

ng new ClientApp

This will create Angular 6 application within API project.

Next task is to run our Angular application with .Net Core. For this we need to

add some code within Startup.cs class.

Add below lines in ConfigureService method:

services.AddSpaStaticFiles(configuration =>

{

configuration.RootPath = "ClientApp/dist";

});

Add below lines in Configure method:

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseSpaStaticFiles();

app.UseHttpsRedirection();

app.UseMvc();

app.UseSpa(spa =>

{

spa.Options.SourcePath = "ClientApp";

if (env.IsDevelopment())

{

spa.UseAngularCliServer(npmScript: "start");

}

});

Above code adds required configuration for running Angular code with .Net

January 2018
December 2017
November 2017
October 2017
September 2017
August 2017
July 2017
May 2017
April 2017
February 2017
November 2016
October 2016
September 2016
August 2016
July 2016
February 2016
December 2015
October 2015
September 2015
August 2015
July 2015
January 2015
Recent Comments
Szumma #134 –…
on Free e-book for
Azure tips and…
Free e-book for
Azur… on Azure
for Architects:
Free E-B…
Dot Net
Programming on
.Net Core 3.0 is
coming: Excit…
Migue on Enable
CORS in Asp .Net
5(vNex…
Dot Net
Programming on
First look of Asp
.Net Core 2.…
Top Posts & Pages
Create an application with
Angular 6 and .Net Core: Step
by step guide
Free e-book for Azure tips and
tricks
Convert HTML To PDF Using
Angular 6
Step by step setup for the Auth
server and the client:
IdentityServer4 with .Net Core
Part II
Deploy .Net Core application to
IIS: Step by step guide
Enforce SSL and use HSTS in
.Net Core(2.0): .Net Core
security Part I
Web API Security with
IdentityServer4:
IdentityServer4 with .Net Core
Part III
Use DbContextPooling to
improve the performance: .Net
Core.
Note: Make sure the property “launchUrl”: “api/values” is not present in the
Properties/launchSettings.json, if it is available then delete it.
Just run the application in the browser:
Your Angular 6 application is now running with .Net Core.
With SPA Template
In first approach, we have not used SPA template to create Angular app, in this
approach we will use the Angular template.
Create the Angular application using .Net Core 2.1 template in
VS 2017
Once you have all these installed, open your Visual Studio 2017 -> Create New Project -
> Select Core Web application:
Click on Ok and in next window, select Angular as shown below:
 

Core 2.1 feature
IdentityServer4 in simple
words: IdentityServer4 with
.Net Core Part I
Generate an exe for the .Net
Core console apps: .Net Core
Quick posts part 5
RSS
 RSS - Posts
 RSS - Comments
Authors of this site
Akshay Deshmukh
danishwadhwaflybiz
Manav Pandya
Mangesh Gaherwar
Kasam Shaikh
Neel
Jeeva Subburaj
.Net blogs .Net
Core .Net Core
2.1 .net Core 2.1 preview 1
.Net Core security AI
Amazon  Angular .Net
Angular .Net core
Angular .Net core 2.0
Angular Visual studio  API
Artificial Intelligence
ASP .Net Core
ASP .Net Core
2.0
asp.netcore2.0
Asp .Net Core 2.1
AWS Azure Azure
Machine Learning Bots
Core 2.0 IOT
Machine Learning Machine
Learning in simple words  ML
Nuget  Security in .Net Core
Visual Studio will create a well-structured application for you.
If you compare latest project structure with the previous versions then you would
notice that the Views folder is no more there:
We do not need that Views folder now.
Delete ClientApp and install Angular 6
If you open package.json file under ClientApp folder, you would notice the Angular
version is 5.0 but we want to create Angular 6 application.
So go to File explorer and delete ClientApp folder:
Once the folder is deleted, open Command prompt and navigate to the project and
run command:
ng new ClientApp
This command will create brand new Angular application with latest version.
Once the process is completed, go back to solution explorer -> ClientApp ->
package.json file, it should show Angular 6.0 references:
 

Uncategorized

Visual Studio

2017

My .Net Core 2.0 badge

Follow me on Twitter

Programming Asp .Net

Core book by Microsoft

That is it. We have just created Angular 6 application with .Net Core.

Let us try to use any random Angular 6 feature just to make sure we have latest

Angular 6 code.

Test Library feature

We will test the library feature which has been shipped with Angular 6.

Open the command prompt again and navigate to ClientApp folder -> run command:

ng generate library my-shared-library

Logs in the window confirms that we have Angular 6 now. Library would be created

under the ClientApp -> Projects folder:

Hope it helps.

Share this:

REPORT THIS AD REPORT THIS AD

7 2

C# 8.0 Expected Features Part – IV : Something new for Indexes and ranges

GDPR in .Net Core: .Net Core Security Part VII

36 thoughts on “Create an application with

Angular 6 and .Net Core: Step by step guide”

Pingback: Create an application with Angular 6 and .Net Core: Step by step guide - How to

Code .NET

Published

June 2, 2018







Hi,

Can you please explain the deployment of Angular 6 with .NET Core in IIS Server



Moksha

June 7, 2018 at 11:55 am



Hello, you can check this: https://neelbhatt.com/2017/12/19/build-angular-app-

with-net-core-2-0-templatevs-2017-deploy-on-azure-step-by-step-guide/



Neel

June 7, 2018 at 12:10 pm



This was very helpful. Thanks a lot Neel



kerray

June 21, 2018 at 1:18 pm



Glad to know that it is helpful

Neel

June 24, 2018 at 5:16 pm

REPORT THIS AD

Published by Neel

Lead Software Engineer at AttachingIt | Tech Blogger | Top 4% Overall on

StackOverflow View all posts by Neel





Neel:

Considering 2.1’s integration with Angular 6, would you say the best practice for UI in .Net

Core is to use Angular as your front end rather than Razor files?

Thanks,

mark



Mark Cole

July 2, 2018 at 4:45 pm



Hi Mark, from .Net Core 2.1 on wards, default template does not include the views

which means it would be good to use Angular as front end but we can use Razor as

well. It makes more sense to use Angular though.



Neel

July 3, 2018 at 9:03 am



Neel:

I hate to ask a dumb question, but could you please specify how to “run the app”. I open a

command prompt in the project folder, and run ng serve. I receive the error “Local workspace

file (‘angular.json’) could not be found” What am I doing wrong?

Thanks in advance.



Mark Cole

July 9, 2018 at 1:28 am



Hey Mark, questions are never dumb, it is good when someone asks questions. ng

serve works for me. Reason of the error can be anything from this

answers:https://stackoverflow.com/questions/49810580/error-local-workspace-

file-angular-json-could-not-be-found



Neel

July 9, 2018 at 6:56 am



Is “ng serve” the accepted way to run/debug the application when

using visual studio? If I try to run the app in IIS I get errors about

paths to NPM not found, but using “ng serve” from command prompt

works.

J.R

July 30, 2018 at 2:02 am

Neel

August 3, 2018 at 7:13 am



Hi, ng serve is basically used to test your app locally while developing.

While developing, you can use ng serve which will build the

application and start a web server where you can test. Deploying to IIS

is a different thing because you are using IIS server for that. Have a

look here for hosting Angular apps on IIS:

https://www.google.co.in/search?

safe=strict&ei=ngBkW9DaJYn28gWgo5_YAw&q=host+angular+app

+in+iis&oq=host+angular+app&gs_l=psy-

ab.1.0.0i20i263k1j0l9.2144.5919.0.7918.18.14.1.3.3.0.289.1936.0j4j5.

9.0….0…1c.1.64.psy-ab..6.12.1665…

35i39k1j0i67k1j0i10k1j0i131k1j0i22i30k1.0.7avk2QHyTw8



Neel:

I didn’t upgrade node.js – once I had the latest version the project ran correctly.

Thanks.



Mark Cole

July 10, 2018 at 12:38 am



Good to know that Mark.



Neel

July 11, 2018 at 7:11 am



Thanks for this, this makes is really easy to start with.



rhermans

July 13, 2018 at 7:11 am



Thanks for your kind words.



Neel

July 16, 2018 at 11:42 am



Neel, first of all, great post!!

But trying to expand Mark’s question… What would you consider to be the pros/cons of

choosing Angular over Razor UI? What would be de main differences? Thank you!!



Angel Martínez

July 18, 2018 at 3:34 pm

Neel

July 28, 2018 at 9:36 am



Hello Angel, Thanks a lot. Well your question is broad so I would suggest you to

look at these threads where similar discussion is going on:

https://www.google.co.in/search?

q=angular+vs+razor+UI+site:stackoverflow.com&safe=strict&sa=X&ved=2ahUK

EwiplMX-vsHcAhXrqlQKHU0aAvAQrQIoBDAAegQIABAM&biw=1366&bih=662





Hi Neel,

I have a doubt, in your experience. Which is better using with or without SPA Template?

Thanks.



Luis Angel

July 26, 2018 at 3:48 am



Hi Luis. Using SPA template is bit easier to use as we do not require to configure

anything manually. VS does it for us.



Neel

July 28, 2018 at 9:30 am



One thing to mention is that you need to change parameter in angular.json to make it work in

Production (in Azure):

“outputPath”: “dist”

instead of

“outputPath”: “dist/ClientApp”

to match original .angular-cli.json setting



John

July 30, 2018 at 11:59 pm



Thanks John. This is really helpful.



Neel

July 31, 2018 at 10:51 am



It would be nice how to connect to oracle with this project



Samuel Song

July 31, 2018 at 6:00 pm

Hi Samuel, .Net applications mostly use SQL, there are very few .Net apps which

Neel

August 3, 2018 at 7:17 am



uses Oracle. You can check this for using .Net Core API with Oracle :

https://www.c-sharpcorner.com/article/asp-net-core-web-api-with-oracle-

database-and-dapper/





Thank you Neel, This is really good post to start on AngularJS with .Net Core.

While running the application, I was facing weird issue. Initially was getting HTTP ERROR

500.

This page isn’t working

localhost is currently unable to handle this request.

HTTP ERROR 500

But, after waiting for some time when I reload the browser, it’s working fine.

Any guess ?



Pradip Jalu

August 7, 2018 at 2:56 pm



An unhandled exception occurred while processing the request.

TimeoutException: The Angular CLI process did not start listening for requests

within the timeout period of 50 seconds. Check the log output for error

information.

Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.With

Timeout(Task task, TimeSpan timeoutDelay, string message)

Stack Query Cookies Headers

TimeoutException: The Angular CLI process did not start listening for requests

within the timeout period of 50 seconds. Check the log output for error

information.

Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.With

Timeout(Task task, TimeSpan timeoutDelay, string message)

Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyReq

uest(HttpContext context, HttpClient httpClient, Task baseUriTask,

CancellationToken applicationStoppingToken, bool proxy404s)

Microsoft.AspNetCore.Builder.SpaProxyingExtensions+c__DisplayClass2_0+

<b__0>d.MoveNext()

Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext

httpContext)

Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext

context)

Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(H

ttpContext context)



Pradip Jalu

August 7, 2018 at 3:33 pm



Thanks Pradip. This post may help you:

https://github.com/aspnet/JavaScriptServices/issues/1512. This may

occur due to the extra time taken by the compilation process. You can

increase the startup time out value: spa.Options.StartupTimeout =

new TimeSpan(0, 0, 80);

Neel

August 10, 2018 at 6:26 am



Hi Neel,

Thank you for your response. Application is working fine now locally.

Publishing this app over Azure (app service) from Visual Studio 2017 getting below error.

InvalidOperationException: The SPA default page middleware could not return the default

page ‘/index.html’ because it was not found, and no other middleware handled the request.

Your application is running in Production mode, so make sure it has been published, or that

you have built your SPA manually. Alternatively you may wish to switch to the Development

environment.



Pradip Jalu

August 10, 2018 at 4:15 pm



Looks like you are running the production mode, set it to the development:

ASPNETCORE_Environment=Development, this should help:

https://github.com/aspnet/JavaScriptServices/issues/1514



Neel

August 13, 2018 at 9:21 am



Thanks for the post, I have just followed the steps,

what I still could not be able to do is, ajax calls to web api is not working.



Manula Madushanka

September 18, 2018 at 5:52 am



Hey, I would suggest you to use the httpmodule within the angular instead of

using ajax calls. Have a look here:

https://stackoverflow.com/questions/34802813/how-to-make-ajax-call-with-

angular2ts



Neel

September 19, 2018 at 5:18 pm



It would be nice if you can post how it can be deployed in production using IIS



Samuel

September 19, 2018 at 10:58 pm



Hi Samuel, I will try to publish that soon. Thanks for the suggestion



Neel

September 25, 2018 at 4:28 am

Create An Application With Angular 6 And .Net Core: Step By Guide – Neel Bhatt Core

Navigation menu

Versions of this User Manual:

Views

Navigation