Single Page Applications (SPA) have some of the best user experiences on the web. They are fast, work well with mobile, and force developers to create rich APIs. For all of these benefits it’s no wonder that we’ve seen an explosion of web frameworks that cater to this including React, Vue, Angular, Ember, and so on.
There are a handful of negatives however. For one, traditionally, the Search Engine Optimization (SEO) has been poor. That is to say that many search engines and social media platforms don’t know how to parse meta tags from the applications. As a result, search engines may not correctly display the information you’d like them to. Or you may be trying to impress someone by linking them to your website, only for the social media platform to completely fail loading the title and description.
The good news is that there have been significant strides to try and repair this problem. The key is something called Server Side Rendering (SSR). SSR renders the view server side first, and then transfers this to the client. This means that your clients will always have the HTML up front.
The Server Side Rendering implementation for the Angular framework is Angular Universal. Due to the fact that my personal website is written entirely in Angular, I have been suffering from poor SEO and bad social media integration. I took the time to implement my website in Angular Universal and I wanted to share some advice I gained from the process.
The documentation for Angular Universal is a bit sparse, and much of what exists online is quite old, so if any of this helps you I will be very happy.How to Setup Angular 6 Universal
One of the key things I’d need to point out right away is that the Angular CLI will do the heavy lifting for you.
Simply open up your project and run the following command.
ng generate universal –client-project PROJECT_NAME
It is important that you use the project name that is in your package.json. This command will immediately make a lot of the changes for you.You MUST use HttpClient
This issue really only applies to folks who are supporting an Angular project that has been around for a while (me). I originally wrote my website in Angular 4 and have been updating it ever since. That carried an extra issue because the old Http module from ‘@angular/http’ DOES NOT WORK with Angular Universal. I should mention that this is not mentioned anywhere in the official documentation for Angular Universal. Therefore, if you are having weird issues, this is likely a culprit.You MUST use Absolute URLs
You won’t get around this one. In order for the prerendering to occur you must specify absolute URLs. This can be achieved by either injecting the APP_BASE_HREF token, or by specifying the base href.Your Server CAN be Written in Regular JS
I hope some of these tips helped someone in need. Angular Universal can be a very tricky technology to implement.