这个问题通常是由于Angular Universal的配置错误引起的。确保正确地设置了应用程序的通用配置以确保正确渲染HTML内容和meta标签。
以下是一个可能的解决方案,使用Angular CLI中默认生成的应用程序为例:
在根目录中安装@nguniversal/express-engine和@nguniversal/builders:
npm install --save @nguniversal/express-engine @nguniversal/builders
在angular.json文件中的server项目中添加Universal配置。替换项目名称和路径为你自己的。例如:
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "./dist/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"universal": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.universal.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"vendorChunk": false,
"buildOptimizer": true,
"platform": "server"
}
}
}
在app.server.module.ts中,引入BrowserModule和ServerModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'serverApp' }),
ServerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppServerModule { }
在environment.universal.ts中,添加以下代码:
export const environment = {
production: true,
server: true
};
在main.server.ts中,添加以下代码:
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { AppServerModuleNg