Angular 4 + Universal - 在/ 404 pagecomponent

时间:2017-09-26 06:48:16

标签: javascript angular express angular2-routing angular-universal

在搜索和浏览几个StackOverflow问题时,我得到的是:标题来自服务器提供的响应,所以这不是一件事。

所以决定从server.ts文件解决它,但无法找到任何线索。

下面是我的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 PORT = process.env.PORT || 4000;

enableProdMode();

const app = express();

let 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}!`);
});

1 个答案:

答案 0 :(得分:1)

您可以将提供者传递给renderModuleFactory方法(请参阅Angular docs)。

这样您就可以将请求和响应对象注入Angular App。 This post例如{}很好地解释了这个方法。

然后,在404组件中,如果您在服务器端,则可以获取响应对象并设置404状态。