从 Angular 4.4.0 迁移到 Angular 5.2.0 导致服务器端呈现错误

Question

我正在将我的 angular 应用程序从 4.4.0 迁移到支持服务器端呈现的 5.2.0。

虽然运行 angular (v5) 中的命令 npm start 我收到此错误

src/server.ts(5,42): error TS2307: Cannot find module '../dist/ngfactory/src/app/app.server.module.ngfactory'.

此外，我检查了 dist 文件夹，其中不包含相同的文件。我认为需要更改配置以修复我遗漏的内容。有人遇到过同样的问题吗？

server.ts 包含：

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const compression = require('compression')

const PORT = 4000;
let forceHttps = false;
const livehoststring = '-';
const livehost = '-';
const staticlivehost = '-';

enableProdMode();

const app = express();

app.use(compression());

const template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

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

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

阅读一些文章后，我似乎必须从其他位置导入 AppServerModuleNgFactory。但我无法找到确切的位置。

Answer 1

我通过将 server.ts 中的 AppServerModuleNgFactory 导入路径替换为如下解决了问题：

const {  AppServerModuleNgFactory } = (module as any).exports;
// import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'

通过将其替换为上面的内容，您的 npm start 命令将正常工作。

(PS: 但是在那之后我在运行上遇到了新的错误)

Cannot read property 'moduleType' of undefined

从 Angular 4.4.0 迁移到 Angular 5.2.0 导致服务器端呈现错误

Migration from Angular 4.4.0 to Angular 5.2.0 cause error in server side rendering

server-side-rendering

angular