Die Überprüfung von Angular isPlatformBrowser anhand von PLATFORM_ID verhindert nicht das serverseitige Pre-Rendering

Ich versuche, die Anwendung Angular 4 + ASP.NET Universal zu kompilieren, die basierend auf dem Beispielprojekt hier erstellt wurde, indem ich diese Hinweise https://github.com/angular/universal#universal-gotchas verwende
und wenn ich ein Projekt mit Webpack erstelle und es dann ausführe Es wird ein Fehler ausgegeben, da der Code eingekapselt wurde, wenn der Block überprüft wurde

isPlatformBrowser

wurde serverseitig vorgerendert. Wie kann die Ausführung dieses Codes auf der Clientseite ohne Vorab-Rendering effektiv erzwungen werden, während anderer Code, der mit dem serverseitigen Vorab-Rendering ordnungsgemäß funktioniert, auf der Serverseite vorab gerendert werden muss?

Hier ist meine Komponente mit Leaflet-Code, der in einem Bedingungsblock eingekapselt ist und prüft, ob die Plattform ein Browser ist oder nicht.

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
 }
 }
 
}

Lösung des Problems

Sie können einige Elemente aus Ihrem DOM entfernen, indem Sie verwenden *ngIf. Schreiben Sie den aktuellen Zustand in eine Eigenschaft Ihrer Komponente und überprüfen Sie dies in Ihrer HTML-Datei.

Komponente.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);
 }
}

Komponente.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>

Dadurch wird auf der Serverseite ein DOM erstellt, das nicht enthält md-selectund daher nicht fehlschlägt. Beachten Sie jedoch, dass dies zu unerwarteten Änderungen dessen führen kann, was der Benutzer sieht, da die Site zunächst im Browser ohne das Element gerendert wird (weil der Server dies geliefert hat) und nachdem Javascript geladen wurde und Angular das Element in Aktion setzte taucht plötzlich auf.