On the very first day of New Year 2019, I have published a post about creating an Asp.Net Core Application with Angular 7 (step-by step guide) which encourage me to write about the SPA with Asp.Net Core and Angular 7 CLI project.
So by the end of this tutorial, you will learn to setup the basic environment of SPA (Single Page Application) template feature of Asp.Net Core with Angular project.
Single Page Applications (SPAs) are the web applications that loads the single HTML page and dynamically update that page as the user interact with that application.
From the tutorial that I have mentioned above, I have already created the Asp.Net Core 2.1 application with Angular 7 CLI project.
I recommend you to read that guide if you need support to start creating your very first Angular project with Asp.Net Core.
This the screenshot of folder structure from that project.
First I will rename this project from DemoApplication to AspNetCore_SPAwith_Angular so that it looks a little bit meaning-full when I upload the project on GitHub.
The final structure of the Asp.Net Core API Application with Angular 7 CLI project looks like as shown below.
Instead of separately creating the Angular CLI project, you have an option to select the Angular SPA template while creating the Asp.Net Core project.
But, in this tutorial I preferred to use Angular CLI project instead of Angular template available on Visual Studio.
To configure the Asp.Net Core SPA feature with Angular CLI project, you need to import the Microsoft.AspNetCore.SpaServices.AngularCli namespace in Startup.cs file. The SpaServices provides other useful infrastructures like Server-side pre-rendering, Webpack Dev Middleware, Routing Helpers etc.
Now, we have to add few lines of code on Startup.cs file.
public void ConfigureServices(IServiceCollection services)
// In production, the Angular files will be served from this directory
configuration.RootPath = "ClientApp/dist";
We instruct the application to serve the static angular files from the directory “ClientApp/dist”.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
// 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";
spa.Options.StartupTimeout = TimeSpan.FromSeconds(600);
The above highlighted parts also need to be added inside the Configure method of Startup.cs file. You can increase or decrease the startup time out for the SPA according to your requirement.
Next, have a close look at launchsetting.json file where the initial URL for the IIS Express has been mentioned as “launchUrl”: “api/values”. You can delete that line, so that the application starts with the base URL.
Now build the application and hit f5 along with IIS Express. you can see the application running as shown below.
Hope this helps you to start creating the SPA with Asp.Net Core and Angular CLI project.
Happy Coding !!!