Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (44 sloc) 1.62 KB
title lastmod publishdate author draft description tags
Angular Universal SSR Cookbook
2019-01-24 07:14:41 -0700
2019-01-24 07:14:41 -0700
Jeff Delaney
Common recipies and solutions for serverside rendering (SSR) with Angular Universal

Angular Universal is a powerful tool that allows us to render our applications on the server, but it contains many pitfalls because NodeJS does not have the same APIs as the DOM. The snippet contains a collection of recipes to for common SSR use cases.

{{% box icon="angular" class="box-orange" %}}

Work in Progress

This snippet is a work in progress. If you have a useful addition feel free to add it below by making a pull request on Github. {{% /box %}}

Platform Checking

In some cases, you may have code that should only run in the browser. You can do this by checking the platform and using conditional logic in your components.

{{< file "ngts" "some.component.ts" >}} {{< highlight typescript >}} import { Component, Inject } from '@angular/core'; import { PLATFORM_ID } from '@angular/core'; import { isPlatformBrowser } from '@angular/common';

@Component(...) export class SomeComponent { isBrowser: boolean;

constructor( @Inject(PLATFORM_ID) platformId) { this.isBrowser = isPlatformBrowser(platformId); } } {{< /highlight >}}

{{< file "html" "foo.component.html" >}} {{< highlight html >}} <button *ngIf="isBrowser">

{{< /highlight >}}