Angular 5 - How to use LocalStorage, Window, Document and other browser types in Angular Universal

Ryan

6 years ago

Developing an Angular Universal (aka isomorphic) application means to write code that can be rendered everywhere, regardless of the client: a web browser, a mobile app, a server-side Node.JS or ASP.NET service that does the prerendering, and so on. This has big advantages in terms of performances, scalability and SEO, but it also comes with some downsides that we need to understand.

The most important of them - and the one causing more issues - is probably the fact that some "global" Javascript objects known as browser types, such as window , document , navigator and so on are not so "global" anymore: when writing JS code using an universal/isomorphic approach we can't take them for granted because they simply do not exist on the server, which is one of the contexts we need to take care of.

To better explain this, it means that we can't do this:

window.localStorage.setItem("someKey", "someValue");

1	window.localStorage.setItem("someKey", "someValue");

Because it will definitely generate an error during the server-side prerendering phase.

If we need to use these objects, we need to wrap them into a conditional code block that will ensure they'll be executed only in the appropriate context: in other words, we need to execute these kind of instructions situationally within our JS code, thus adopting an isomorphic approach.

Luckily enough, Angular provides us a way to easily do so by making available two very useful objects:

The PLATFORM_ID token (part of the @angular/core package), which can identify the executing platform's type.
The isPlatformBrowser and isPlatformServer methods (from @angular/common), which can be used - in conjunction with the aforementioned PLATFORM_ID - to check whether the current platform is browser or server.

Thanks to these two objects we can easily pull off something like this:

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) { 
    // constructor code
}

ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
        // Client only code.
    }
    if (isPlatformServer(this.platformId)) {
        // Server only code.
    }
}

import { PLATFORM_ID } from '@angular/core';

import { isPlatformBrowser, isPlatformServer } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {

// constructor code

}

ngOnInit() {

if (isPlatformBrowser(this.platformId)) {

// Client only code.

}

if (isPlatformServer(this.platformId)) {

// Server only code.

}

These conditional blocks can be put anywhere within our Angular component's code.

IMPORTANT: Writing isomorphic code and writing decent Angular code are two different things: no matter how conditional and situational our code might be, if we use a global object within an Angular component it means that we're dealing with this stuff in a bad way. To better understand this concept, I strongly suggest to read this post.

If you want to know more about .NET Core and Angular check out the ASP.NET Core 2 and Angular 5 book, available in paperback and/or digital format. Promo Code: ASPCA50 to get it with a 50% discount! The book's latest edition, updated to ASP.NET Core 5 and Angular 11, is available here.

For more info about Angular Universal and isomorphic JavaScript check out the following resources:

Print Friendly & PDF Download