Angular Universal ssr - 静态预渲染

Question

我最近更新到最新的 Angular 版本 10，我在运行静态预渲染时遇到问题，错误是： 未处理的承诺拒绝：无法读取未定义的属性“moduleType”； 我尝试了不同的配置，但总是同样的错误，你可以在下面找到我的配置代码。

服务器.ts

import 'zone.js/dist/zone-node';

//import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

//import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync, readFileSync } from 'fs';

//const { AppServerModule, LAZY_MODULE_MAP } = require('./dist/server/main');
//const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');

const {AppServerModule, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap, renderModuleFactory} = require('./dist/server/main');


const server = express();
//const distFolder = join(process.cwd(), 'dist/browser');
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {


  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}
export * from './src/main.server';

Prerender.ts

// Load zone.js for the server.
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
import { join } from 'path';

import { enableProdMode } from '@angular/core';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
//import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { renderModuleFactory } from '@angular/platform-server';

const ROUTES = ['/'];
//const PAGE_DIR = process.argv.slice(2, process.argv.length)[0];

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

const BROWSER_FOLDER = join(process.cwd(), 'browser/theme-adventure/');

let previousRender = Promise.resolve();

// Iterate each route path
ROUTES.forEach(route => {

  var fullPath = join(BROWSER_FOLDER, route);
  var index = readFileSync(join(fullPath, 'index.html'), 'utf8');
//  console.log("FULL PATH", fullPath);
  // Make sure the directory structure is there
  if (!existsSync(fullPath)) {
    mkdirSync(fullPath);
  }

  // Writes rendered HTML to index.html, replacing the file if it already exists.
  previousRender = previousRender.then(_ => renderModuleFactory(AppServerModuleNgFactory, {
    document: index,
    url: route
  })).then(html => writeFileSync(join(fullPath, 'index.html'), html));
 
});

谢谢

Answer 1

AppServerModuleNgFactory 和 LAZY_MODULE_MAP 不适用于 ng9/ng10 通用，请查看安装指南