Using an Angular project as a Single Page Application (SPA) is relatively straight forward in .NET Core.

The ASP.NET Core project already has extensions that allow you to do this. You can find the Microsoft.AspNetCore.SpaServices.Extensions from Nuget and add it to your project. If you are running in development mode, you can use the AngularCliBuilder to automatically build your Angular application when your .NET Core application initialises.

The problems with SPA

The issues you've got with an Angular project is that Angular is a framework written in JavaScript and JavaScript is a client-based language. That means that the page is rendered on the machine that's viewing the website, rather than the server that it's hosted on.

Try it yourself! If you have an Angular application, turn off JavaScript in your browser and you will probably find a very empty page. You can also do the same by viewing the HTML Source of the page and seeing that the HTML doesn't match up with what's being shown on the page.

This is because the client (e.g. your browser) hasn't been instructed to do anything. It assumes the server is doing all the work. So in these instances, the Angular application is never initalised!

Problems with SEO

Having a client-based web application can have real implications with search engine optimisation (SEO).

Search Engines like Google will use an automated tool (a bot) to crawl your website and store the content from a web page. Bot's don't tend to use client-based technologies such as JavaScript to render a web page, so it relies on the content retrieved from the server.

That means that all your content from your Angular web application is at risk of not being crawled at all by the search engine bots.

The solution

As part of the Microsoft.AspNetCore.SpaServices.Extensions project in .NET Core, one of the functions allows you to add SPA pre-rendering. SPA pre-rendering allows you to render your single page application to the server, meaning that things like META attributes are shown when automated computer tools crawl your application.

It's not easy to set up in .NET Core

I tried this with an Angular application and to say I had difficulties in setting it up was an understatement:

  • You have to bear in mind that you must have Node JS installed on the server that is hosting your SPA. With an Angular application, Node JS is used to render your SPA to the server. So if you are using shared hosting, it's almost certain that your host won't have Node JS installed and you won't be able to go down this route.
  • Trying to identify an server side error with this method was very difficult to pinpoint. If you had an error in your SPA (a missing semi colon for example), the server will return a generic error back to you and it's very hard to pinpoint which part of your SPA is throwing the error.
  • With .NET Core 2.2, there seem to be a bug with the URL that was rendered from the request if you are using Angular. If you are using Angular's routing feature, the URL that was requested didn't seem to return when the SPA pre-rendering was taking place. When I tried it, it seemed to always return index.html, which is the default index page of my Angular application. I documented this issue in a recent StackOverflow question. I managed to resolve this issue by setting up a Middleton that ran at the start of a web request, which stored the URL in HttpContext.Items before the SPA pre-rendering commenced. This meant I could get the "real" URL from HttpContext.Items, but it wasn't the ideal solution.
  • The speed of the web application seem to be compromised thanks to SPA pre-rendering. There was a split second delay whilst Node JS rendered my Angular application to the server. In a day where search engines are getting a lot hotter on site speed, this is another drawback.

Conclusion

One thing I found using Angular for SPA pre-rendering is that the documentation was limited. I used documentation from Microsoft's ASP.NET Core website, but I had to do a lot of searching to resolve issues that seemed to be specific to me.

In my opinion, if your application relies on SEO and you are running it in .NET Core, don't use SPA. It will cause you more stress than it's worth! I warn you...

Related Tags

Angular
ASP.NET Core
JavaScript
SEO

Twitter Feed