简体   繁体   中英

Nrwl Nx 15 + Angular 15 with SSR and PWA - Doesn't work correctly

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

在此处输入图像描述 在此处输入图像描述

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM