[英]Angular SSR with Nrwl/Nx - external library calls document.getElementById
[英]Nrwl Nx 15 + Angular 15 with SSR and PWA - Doesn't work correctly
我們有使用 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"
}
我找到了解決方案。 在我的例子中,Sentry.init() function 阻止了服務器端渲染。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.