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
![](asset-1.png)
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
![](asset-2.png)
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
Follow
Search
Search …
Select Language
Powered by Translate
Recent Posts
Free e-book for Azure
tips and tricks
Creating an Angular 7
App with ASP.NET
Core(Link to the post)
Machine Learning to
prevent Future Disaster
Nested forms in Angular
6(Link to the post)
The first look of
Microsoft Azure Mobile
App with a step by step
guide: Part I
Material Dashboard
Using Angular 6
Demystifying QnAMaker
FAQ Bots Supported
Language Myth
Real-Time Cricket Score
Chrome Extension using
Azure Functions
and SignalR
Convert HTML To PDF
Using Angular 6
Guest Post program:
Welcoming recently
joined authors
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
![](asset-3.png)
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:
![](asset-4.png)
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:
![](asset-5.png)
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
![](asset-6.png)
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
Related
Published
June 2, 2018
Hi,
Can you please explain the deployment of Angular 6 with .NET Core in IIS Server
Reply
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/
Reply
Neel
June 7, 2018 at 12:10 pm
This was very helpful. Thanks a lot Neel
Reply
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
![](asset-7.png)
Reply
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
Reply
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.
Reply
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.
Reply
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
Reply
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
![](asset-8.png)
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.
Reply
Mark Cole
July 10, 2018 at 12:38 am
Good to know that Mark.
Reply
Neel
July 11, 2018 at 7:11 am
Thanks for this, this makes is really easy to start with.
Reply
rhermans
July 13, 2018 at 7:11 am
Thanks for your kind words.
Reply
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!!
Reply
Angel Martínez
July 18, 2018 at 3:34 pm
Neel
July 28, 2018 at 9:36 am
![](asset-9.png)
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
Reply
Hi Neel,
I have a doubt, in your experience. Which is better using with or without SPA Template?
Thanks.
Reply
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.
Reply
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
Reply
John
July 30, 2018 at 11:59 pm
Thanks John. This is really helpful.
Reply
Neel
July 31, 2018 at 10:51 am
It would be nice how to connect to oracle with this project
Reply
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
![](asset-a.png)
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/
Reply
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 ?
Reply
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)
Reply
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
![](asset-b.png)
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.
Reply
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
Reply
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.
Reply
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
Reply
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
Reply
Samuel
September 19, 2018 at 10:58 pm
Hi Samuel, I will try to publish that soon. Thanks for the suggestion
Reply
Neel
September 25, 2018 at 4:28 am
![](asset-c.png)
Leave a Reply
Blog at WordPress.com.
It would be really nice if you post to how to compile and to publish at once.
I meant debugging is easy, but to publish it I need to compile Angular 6 in prod and and
publish core 2.1 seperately and move the files around
Thanks !! in advance
Reply
Samuel Song
September 25, 2018 at 2:43 am
Hey, I have posts to publish angular app on Azure and Firebase. Have a look here:
https://neelbhatt.com/2017/12/19/build-angular-app-with-net-core-2-0-
templatevs-2017-deploy-on-azure-step-by-step-guide/ and here:
https://neelbhatt.com/2018/09/12/publish-angular-6-app-to-firebase/
Reply
Neel
September 25, 2018 at 4:30 am
The problem is I want to publish to WebHost a normal Windows10
server. Very disappointed.
Marvin Cook
October 3, 2018 at 7:43 pm
What is the problem you are facing?
Neel
October 5, 2018 at 12:16 pm
Enter your comment here...
Enter your comment here...
Close and accept
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy