Angular 4 Universal “window is not defined”

问题

My project was running perfectly but when i implement universal then i am getting "window is not defined".

My error is as below.

 node_modules/hammerjs/hammer.js:2643

 })(window, document, 'Hammer');

      ^
  ReferenceError: window is not defined
     at Object.<anonymous> (/var/www/html/resumeble_unv/node_modules/hammerjs  /hammer.js:2643:4) 

      at Module._compile (module.js:571:32)
      at Object.Module._extensions..js (module.js:580:10)
      at Module.load (module.js:488:32)
      at tryModuleLoad (module.js:447:12)
     at Function.Module._load (module.js:439:3)
     at Module.require (module.js:498:17)
     at require (internal/module.js:20:19)
     at node_modules/ngx-carousel/bundles /ngxcarousel.umd.js:2:174
    at Object.<anonymous> (node_modules/ngx-carousel/bundles/ngxcarousel.umd.js:5:2)

package.json

  { 
  "name": "resumable-ang",

  "version": "0.0.0",

  "license": "MIT",

  "scripts": {
   "prestart": "ng build --prod && ngc",
    "start": "ts-node src/server.ts" },

   "private": true,
  "dependencies": {

  "@angular/animations": "^4.4.6",
  "@angular/common": "^4.0.0",
  "@angular/compiler": "^4.0.0",
  "@angular/core": "^4.0.0",
 "@angular/forms": "^4.0.0",
  "@angular/http": "^4.0.0",
  "@angular/platform-browser": "^4.0.0",
  "@angular/platform-browser-dynamic": "^4.0.0",
  "@angular/platform-server": "^4.*",
  "@angular/router": "^4.0.0",
  "@ng-select/ng-select": "^0.12.0",
  "@ngx-share/core": "^5.0.0-beta.3",
  "@types/jquery": "^3.2.15",
  "angular-progress-http": "^1.0.0",
  "core-js": "^2.4.1",
  "jquery": "^3.2.1",
  "ngx-carousel": "^1.3.5",
  "ngx-page-scroll": "^4.0.2",
  "ngx-progressbar": "^2.1.1",
  "ngx-sharebuttons": "^3.*",
  "rxjs": "^5.1.0",
  "web-animations-js": "^2.3.1",
  "zone.js": "^0.8.4"
},

  "devDependencies": {
  "@angular/cli": "1.1.1",
  "@angular/compiler-cli": "^4.0.0",
  "@angular/language-service": "^4.0.0",
  "@types/jasmine": "2.5.45",
  "@types/node": "~6.0.60",
  "codelyzer": "~3.0.1",
  "jasmine-core": "~2.6.2",
  "jasmine-spec-reporter": "~4.1.0",
  "karma": "~1.7.0",
  "karma-chrome-launcher": "~2.1.1",
  "karma-cli": "~1.0.1",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "protractor": "~5.1.2",
  "ts-node": "~3.0.4",
  "tslint": "~5.3.2",
 "typescript": "~2.3.3"
  }
}

回答1:

As @trichetriche said. You don't have access to window object on the server side. The only thing which should be mentioned here is, that the better way instead of using

if(window) {}

Would be (let's say it is more "Angular" ;) ):

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

constructor(@Inject(PLATFORM_ID) private platformId: any) {}

public someMethod(): boolean {
    if (isPlatformBrowser(this.platformId)) {
         //action specific for browser
    }
}

You can take a look at live example in one of my repositories: https://github.com/maciejtreder/angular-universal-pwa/blob/master/src/app/services/notification.service.ts

回答2:

Because Angular Universal allows you to create server-side rendered pages. And in a server, you don't have a browser, therefore you don't have a window.

You should make a condition to test if the window exists, something like this

if (window) { /* do your window things here */}

来源：https://stackoverflow.com/questions/48439557/angular-4-universal-window-is-not-defined

标签

angular

universal