如何修复 Angular 17 中未定义 Window？

Question

我最近升级到 Angular 17 和新的 Verse 构建器。运行 ng build 后我得到： 发生未处理的异常：窗口未定义 有关更多详细信息，请参阅“/private/var/folders/gv/n0kqs93x29v30b0cfl5tzr140000gn/T/ng-6nQUx1/angular-errors.log”。

该文件没有提供有用的详细信息，因为它引用了由于错误而不存在的构建文件。我已经将所有带有窗口的代码放入 afterNextRender() 逻辑中。有什么方法可以获取有关错误的更多信息吗？

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve", 
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"

  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.12",
    "@angular/cdk": "^16.2.12",
    "@angular/common": "^17.3.12",
    "@angular/compiler": "^17.3.12",
    "@angular/core": "^17.3.12",
    "@angular/forms": "^17.3.12",
    "@angular/localize": "^17.3.12",
    "@angular/platform-browser": "^17.3.12",
    "@angular/platform-browser-dynamic": "^17.3.12",
    "@angular/platform-server": "^17.3.12",
    "@angular/router": "^17.3.12",
    "@angular/service-worker": "^17.3.12",
    "@angular/ssr": "^17.3.11",
    "@ckeditor/ckeditor5-angular": "^9.0.0",
    "@ckeditor/ckeditor5-build-classic": "^42.0.0",
    "@ckeditor/ckeditor5-core": "^42.0.0",
    "@ckeditor/ckeditor5-engine": "^42.0.0",
    "@ckeditor/ckeditor5-utils": "^42.0.0",
    "@ckeditor/ckeditor5-watchdog": "^42.0.0",
    "@fullcalendar/angular": "^6.1.5",
    "@fullcalendar/core": "^6.1.5",
    "@fullcalendar/daygrid": "^6.1.5",
    "@fullcalendar/interaction": "^6.1.5",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@ng-select/ng-select": "~12.0.7",
    "@popperjs/core": "^2.11.7",
    "@sentry/angular": "^8.38.0",
    "@sentry/tracing": "^7.114.0",
    "@stripe/stripe-js": "^3.0.0",
    "@types/topojson": "^3.2.3",
    "bootstrap": "5.2.3",
    "canvas": "^2.11.2",
    "chart.js": "^4.2.1",
    "chartjs-adapter-date-fns": "^3.0.0",
    "chartjs-chart-geo": "4.1.2",
    "date-fns": "^2.29.3",
    "express": "^4.18.2",
    "localstorage-polyfill": "^1.0.1",
    "ng2-charts": "^5.0.0",
    "ng2-pdf-viewer": "10.3.4",
    "ngx-colors": "3.5.3",
    "ngx-infinite-scroll": "^17.0.0",
    "ngx-stripe": "^17.0.0",
    "rxjs": "^6.6.7",
    "tslib": "^2.5.0"
  },
  "dependenciesMeta": {
    "@fullcalendar/angular": {
      "injected": true
    }},
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.11",
    "@angular-eslint/builder": "~17.3.0",
    "@angular-eslint/eslint-plugin": "~17.3.0",
    "@angular-eslint/eslint-plugin-template": "~17.3.0",
    "@angular-eslint/schematics": "~17.3.0",
    "@angular-eslint/template-parser": "~17.3.0",
    "@angular/cli": "~17.3.11",
    "@angular/compiler-cli": "~17.3.12",
    "@types/express": "^4.17.17",
    "@types/jasmine": "^3.6.11",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "browser-sync": "^3.0.0",
    "ckeditor5": "^42.0.0",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "jasmine-core": "3.8",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "^3.1.1",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "^4.0.2",
    "karma-jasmine-html-reporter": "^1.7.0",
    "prettier": "^2.8.7",
    "sass": "^1.61.0",
    "sass-loader": "^13.2.2",
    "ts-node": "^10.9.1",
    "typescript": "~5.4.5",
    "webpack": "^5.78.0"
  }
}

Answer 1

在您使用窗口的任何组件中，也注入 PLATFORM_ID：

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

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    // This code will only run in the browser
    console.log(window);
  }
}

现在你可以走了。