Nrwl Nx 15 + Angular 15 与 SSR 和 PWA - 不能正常工作

Question

我们有使用 Nrwl Nx monorepo 工具生成的项目。 在我们的一个应用程序中，我们使用 Angular 15 和 PWA 配置。 我们将在应用程序中设置服务器端渲染。 我们使用名为@nrwl/angular:setup-ssr 的预定义 Nx 生成器。

当应用程序在专用服务器上运行时，我们会遇到“等待服务器响应”时间问题。 等待时间来到30s~然后页面渲染。 有时页面源有正确的内容，有时看起来不像是由服务器端生成的。 对我来说，它看起来像是超时，但我们没有任何 setTimeout 或 setInterval 调用。

在本地环境中，我们使用来自 Nx 的 @nguniversal/builders:ssr-dev-server 执行器，它不会呈现任何应用程序补丁。 在 devtools 中，我们可以在 html 文件上看到“待定”状态，并且它永远不会解析。

有没有人有类似的问题，可以告诉我如何解决？

这是我们的一些配置文件：

tsconfig.server.ts文件

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/server",
    "types": [
      "node",
      "facebook-js-sdk",
      "google.accounts"
    ]
  },
  "files": [
    "src/main.server.ts",
    "server.ts"
  ]
}

tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": [
      "es2017",
      "dom"
    ],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true
  },
  "exclude": [
    "node_modules",
    "tmp"
  ]
}

主.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { isProductionEnvironment, isStagingEnvironment } from '@app/environment';
import 'hammerjs';

function bootstrap() {
  const isStaging = isStagingEnvironment(environment);
  const isProduction = isProductionEnvironment(environment);

  if (isStaging) {
    enableProdMode();
  }

  if (isProduction) {
    if (window) {
      window.console.log = () => {
      };
    }

    enableProdMode();
  }

  platformBrowserDynamic().bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true }).catch((err) => console.error(err));
}

if (document.readyState !== 'loading') {
  bootstrap();
} else {
  document.addEventListener('DOMContentLoaded', bootstrap);
}

应用程序服务器.ts

import '@angular/localize/init';
import '@angular/platform-server/init';

export { AppServerModule } from './app/app.server.module';
export { renderModule } from '@angular/platform-server';

tsconfig.json

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "target": "es2022",
    "useDefineForClassFields": false,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "listEmittedFiles": true,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "diagnostics": true,
    "extendedDiagnostics": true,
    "removeComments": true,
    "allowSyntheticDefaultImports": true
  },
  "files": [],
  "include": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./tsconfig.editor.json"
    }
  ],
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "extendedDiagnostics": {
      "invalidBananaInBox": "error",
      "nullishCoalescingNotNullable": "error"
    }
  }
}

package.json

  "dependencies": {
    "@angular/animations": "15.0.4",
    "@angular/cdk": "15.0.3",
    "@angular/common": "15.0.4",
    "@angular/compiler": "15.0.4",
    "@angular/core": "15.0.4",
    "@angular/forms": "15.0.4",
    "@angular/material": "15.0.3",
    "@angular/material-date-fns-adapter": "15.0.3",
    "@angular/platform-browser": "15.0.4",
    "@angular/platform-browser-dynamic": "15.0.4",
    "@angular/platform-server": "15.0.4",
    "@angular/router": "15.0.4",
    "@angular/service-worker": "15.0.4",
    "@ngrx/component-store": "15.1.0",
    "@ngrx/effects": "15.1.0",
    "@ngrx/entity": "15.1.0",
    "@ngrx/router-store": "15.1.0",
    "@ngrx/store": "15.1.0",
    "@ngrx/store-devtools": "15.1.0",
    "@nguniversal/common": "15.0.0",
    "@nguniversal/express-engine": "15.0.0",
    "@sentry/angular": "7.28.1",
    "@sentry/tracing": "7.28.1",
    "apexcharts": "3.36.3",
    "date-fns": "2.29.3",
    "hammerjs": "2.0.8",
    "morgan": "1.10.0",
    "ng-apexcharts": "1.7.4",
    "ngx-image-cropper": "6.3.2",
    "rxjs": "7.8.0",
    "swiper": "8.4.5",
    "tslib": "2.4.1",
    "zone.js": "0.12.0"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "15.0.0",
    "@angular-devkit/build-angular": "15.0.4",
    "@angular-eslint/eslint-plugin": "15.1.0",
    "@angular-eslint/eslint-plugin-template": "15.1.0",
    "@angular-eslint/template-parser": "15.1.0",
    "@angular/cli": "15.0.4",
    "@angular/compiler-cli": "15.0.4",
    "@angular/language-service": "15.0.4",
    "@angular/localize": "15.0.4",
    "@nguniversal/builders": "15.0.0",
    "@nrwl/angular": "15.4.2",
    "@nrwl/eslint-plugin-nx": "15.4.2",
    "@nrwl/linter": "15.4.2",
    "@nrwl/workspace": "15.4.2",
    "@tailwindcss/line-clamp": "0.4.2",
    "@types/facebook-js-sdk": "3.3.6",
    "@types/google.accounts": "0.0.4",
    "@types/hammerjs": "2.0.41",
    "@types/jasmine": "4.3.1",
    "@types/morgan": "1.9.4",
    "@types/node": "16.18.11",
    "@typescript-eslint/eslint-plugin": "5.47.1",
    "@typescript-eslint/parser": "5.47.1",
    "autoprefixer": "10.4.13",
    "eslint": "8.31.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-ngrx": "2.1.4",
    "jasmine-core": "4.5.0",
    "karma": "6.4.1",
    "karma-chrome-launcher": "3.1.1",
    "karma-coverage": "2.2.0",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.0.0",
    "nx": "15.4.2",
    "postcss": "8.4.20",
    "prettier": "2.8.1",
    "tailwindcss": "3.2.4",
    "typescript": "4.8.4"
  }

Answer 1

我找到了解决方案。 在我的例子中，Sentry.init() function 阻止了服务器端渲染。