javascript - window nu este definit angular universal a treia bibliotecă

Lucrez cu biblioteca ng2-mqtt și am folosit-o în componenta mea astfel:

 import 'ng2-mqtt/mqttws31.js';
declare var Paho: any;

Acum primesc următoarea eroare:

ReferenceError: window is not defined
    at Object.<anonymous> (/Users/Picchu/Documents/em3/node_modules/ng2-mqtt/mqttws31.js:2143:4)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/Picchu/Documents/em3/dist/server.js:18707:18)

Cum pot rezolva această problemă?

Răspuns #1

O posibilă modalitate de a evita eroarea serverului este să nu redai componenta (dacă este o opțiune) care folosește window. Ceva de genul:

<ng-container *ngIf="isBrowser">
   <!-- mqttws31-component -->
   <mqttws31-component></mqttws31-component> 
</ng-container>

The isBrowser poate fi importat din(ng2)

import { isBrowser } from 'angular2-universal';

Sau dacă ng4+, poți defini acest lucru și în modulul tău de browser:

// app.browser
@NgModule({
  providers: [
    { provide: 'isBrowser', useValue: true }
  ]
})

apoi injectează din constructor

export class SomeComponent implements OnInit {
  constructor(@Inject('isBrowser') private isBrowser: boolean)
  ngOnInit() { 
    // example usage, this could be anywhere in this Component of course
    if (this.isBrowser) { 
      alert('we're in the browser!');
    }
}

Răspunsul #2

ACTUALIZARE

Extinzând răspunsul lui Leon Li, putem evita încărcarea componentelor care nu pot fi redimensionate pe server dacă acestea necesită API-uri de browser precum location sau window.

Acest răspuns explică cum să folosești

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

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

Pur și simplu injectează PLATFORM_ID în serviciul tău și pasează-l la isPlatformBrowser sau isPlatformServer pentru a obține o valoare Booleană. În consecință, poți afișa/ascunde componentele care nu pot fi redare pe server dacă depind de API-urile Browser-ului.