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

Question

We have project generated using Nrwl Nx monorepo tool. In one of our apps we are using Angular 15 with PWA configuration. We are going to setup server side rendering in the app. We used predefined Nx generator named @nrwl/angular:setup-ssr.

When the app runs on dedicated server we have issue with "waiting for server response" time. Waiting time comes to 30s~ and then page renders. Sometimes page source have correct content, sometimes doesn't looks like generate by server-side. For me it is looking as a timeout but we don't have any setTimeout or setInterval calls.

In local environment we are using @nguniversal/builders:ssr-dev-server executor from Nx, and it doesn't render any app patch. In devtools we can see "pending" status on html file and it never resolves.

Did anyone have similar problem and can tell me how to fix it?

Here are some our config files:

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

main.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);
}

app.server.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

I found the solution. In my case the Sentry.init() function blocked server-side render.