Question

我的项目运行得很好但是当我实现通用时，我得到“窗口未定义”。

我的错误如下。

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

Answer 1

正如@trichetriche所说。您无权访问服务器端的window对象。这里应该提到的唯一的事情是，更好的方式而不是使用

if(window) {}

会是（让我们说它更像是“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
    }
}

您可以查看我的某个存储库中的实例： https://github.com/maciejtreder/angular-universal-pwa/blob/master/src/app/services/notification.service.ts

Answer 2

因为Angular Universal允许您创建服务器端呈现的页面。在服务器中，您没有浏览器，因此您没有窗口。

你应该制定一个条件来测试窗口是否存在，就像这样

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

Answer 3

您可以使用@ squadette / hammerjs代替Hammerjs。 @ squadette / hammerjs是服务器端渲染友好的。

要使用它，只需运行

npm i @squadette/hammerjs

安装它。然后替换更改

import  'hammerjs';

到

import  '@squadette/hammerjs';

Angular 4 Universal“窗口未定义”

3 个答案: