如何在Angular Universal项目中添加服务器渲染

npm install @nguniversal/express-engine @nguniversal/module-map-ngfactory-loader express --save

import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

enableProdMode();

const app = express();

const indexHtml = readFileSync(join('dist', 'browser', 'index.html'), 'utf-8');

app.get('*.*', express.static(join(__dirname, 'dist', 'browser')));

app.get('*', (req, res) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: indexHtml,
    url: req.url,
    extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP)
    ]
  }).then(html => {
    res.status(200).send(html);
  });
});

app.listen(4000, () => {
  console.log('Angular Universal server listening on port 4000');
});

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  },
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    }
  }
}

export { AppServerModule } from './app/app.server.module';

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule { }

ng build --configuration=production --output-hashing=all

node server.js