Secret ingredients to quality software

SSW Foursquare

Options - Do you know that the ASP.NET Core SPA Template for Angular uses the Angular CLI?

Last updated by TiagoAraujo on 26 Oct 2018 05:44 pm (over 3 years ago) See History

For .NET Developers only!

For many Angular solutions, a good practice is to keep your client-side and server-side code in separate projects.

  • You get a clear separation of concerns
  • You usually expect your server-side stack to outlive your client-side technologies
  • You may plan to use your WebAPI with multiple user interfaces such as mobile or bots
  • Easier to deploy your angular app to a CDN

For some solutions, it might be simpler to integrate your client-side and server-side into a single project – and with the SPA templates for ASP.Net Core, this has never been easier.

  • A single project might make sense for a smaller, simpler solution
  • There will be only one website to deploy to a single web server that will serve both angular and WebAPI sites
  • The project can be built with a single build process
  • This might be a good choice if you are looking to migrate an existing MVC website as you can host MVC pages and the Angular app under one site
  • This approach is easier if you want to use Windows Authentication
  • No CORS configuration required

To create an Angular application with the SPA template new project from the command line or you can use Visual Studio. From ASP.NET Core 2.1 onwards, this template is included.

create angular via cmd
Figure: Creating a project from the command line

create angular via vs
Figure: Creating a project using Visual Studio

Although Visual Studio can be used to create the project, we still recommend Visual Studio Code for working with the Angular code, as per Do you know the best IDE for Angular?

The ASP.NET Core SPA Template for Angular Includes:

simple example webapi
Figure: A simple example WebAPI

angular ui with bootstrap
Figure: An Angular UI with Twitter Bootstrap styling

angular server side config
Figure: Server-side configuration in Startup.cs allowing the Angular UI to be hosted from under the single ASP.NET Core website

This Angular app uses the Angular CLI and is fully compatible with any other Angular CLI app. If you want to create a new app from scratch, simply delete the contents of the ClientApp folder and run ng new.

So you get the benefits of easy client-server integration without having to compromise any Angular client-side features or Angular CLI tooling.

Brendan RichardsBrendan Richards

We open source. Powered by GitHub