Angular isPlatformBrowser checking against PLATFORM_ID doesn't prevent server-side pre rendering

Question

I am trying to compile Angular 4 + ASP.NET Universal application created based on sample project here, using this hints https://github.com/angular/universal#universal-gotchas and when I build project with webpack, and then run it there is error thrown as the code that was encapsulated inside if block checked against

isPlatformBrowser

was prerendered on server side. How to effectively enforce execution of this code on client side without prerendering, while other code that works appropriately with server side pre rendering leave to be pre rendered on there server-side?

Here's my Component with Leaflet code encapsulated inside conditional block checking whether platform is Browser or not.

import {Component, OnInit, Inject} from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import * as L from 'leaflet';


@Component({
    selector: 'leaflet-map',
    templateUrl: 'leaflet-map.component.html',
    styleUrls: ['leaflet-map.component.css', '../../../..//node_modules/leaflet/dist/leaflet.css'],
})
export class LeafletMapComponent implements OnInit { 

    constructor(@Inject(PLATFORM_ID) private _platformId: Object) {  }

    ngAfterViewInit() { 

       
    }

    ngOnInit() {  
        if (isPlatformBrowser(this._platformId)) {
             L.map('leafletMap').setView([50.08, 19.93], 13);
        }
        if (isPlatformServer(this._platformId)) {
            // Server only code.
            // https://github.com/angular/universal#universal-gotchas
        }
    }
  
}

Answer 1

You can remove some elements from your DOM by using *ngIf. Write the current state into a property of your component and check this within your html file.

component.ts

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

@Component({
  selector: 'mySpecial',
  templateUrl: './mySpecial.component.html'
})
export class MySpecialComponent {
  isBrowser: boolean;

  constructor( @Inject(PLATFORM_ID) platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
}

component.html

<h2>Hello World</h2>
<p>
  <md-select *ngIf="isBrowser" placeholder="Favorite food" name="food">
    <md-option value="Steak">Steak</md-option>
    <md-option value="Pizza">Pizza</md-option>
    <md-option value="Tacos">Tacos</md-option>
  </md-select>
</p>

This will on the server side create a DOM that doesn't contain md-select and so doesn't fail. But be aware that this could lead to some unexpected changes of what the user sees, cause the site will first be rendered in the browser without the element (cause that's what the server delivered) and after javascript is loaded and angular took into action the element suddenly appears.