如何在生产中运行 Angular Universal答案

【问题标题】：How run angular universal in production如何在生产中运行 Angular Universal
【发布时间】：2018-09-30 11:50:57
【问题描述】：

我有一个基于 MEAN STACK 的项目。

Front-end: Angular 6.*.

Backend：ExpressJs 和 Mongodb。

在本地，Angular 在端口 4200 上运行，ExpressJs 在端口 3000 上运行。

在生产中，我构建 Angular 并将其作为静态文件运行在我的 ExpressJs app.js 中。例如，

app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "public/web/browser/index.html"));
});

目前，在遵循文档后，我已经在我现有的项目上实现了Angular Universal。

它可以在本地找到，因为Angular Universal 在本地有自己的Node.js® Express 服务器，它在端口4000 上运行。

在生产中，当我想运行静态文件时，Angular Universal 确实会按预期显示。

比如app.js添加universal后。

let express = require("express");
let path = require("path");

let dotEnv = require("dotenv");
let passport = require("passport");
let app = express();
let server = require("http").Server(app);
dotEnv.load();
let fs = require("fs");
let io = require("socket.io").listen(server);
const appServer = require("./public/web/server/main");

// load intial configuration
require("./startup/initial-configuration")(app, io);
require("./server/config/socket")(io);
require("./server/config/database")(app, process.env.NODE_ENV);
require("./server/authentication/passport.local")(passport);
require("./server/authentication/passport.impersonate");
require("./startup/initial-routes")(app);
require("./server/middleware/custom-middleware")(app);

// angular universal
app.engine('html', ngUniversal.ngExpressEngine({
  bootstrap: appServer.AppServerModuleNgFactory
}));
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "public/web/index.html"));
});

require("./startup/schedule-jobs")(io);
module.exports = { app: app, server: server };

我的问题是如何添加 server.ts 文件 int app.js expressJS 文件中的那些功能。

我已经搜索了很多，但我找不到任何解决方案。

提前致谢。

【问题讨论】：

标签： angular express angular-universal

【解决方案1】：

您需要为您的静态文件添加一个处理程序。因此，我为任何包含. 的文件添加了一个处理程序，该文件包含在我的输出目录“dist/browser”中，这是构建过程生成的 Angular 应用程序的客户端：

import * as express from 'express';
import { join } from 'path';

const app = express();
const DIST_FOLDER = join(process.cwd(), 'dist');

. . .

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

我会强烈建议遵循通用指南：https://angular.io/guide/universal 作为起点，然后在您的 Angular 应用按预期运行后添加任何功能。

如果你有一个现有的用 JavaScript 编写的 Node.js 应用程序，并且你想在它上面添加这个功能，那么真的没有理由用 TypeScript 编写 Angular 应用程序的通用端，如果你不这样做的话需要。

您的构建过程应该将 Angular 应用程序的 TypeScript 转换为 JavaScript，但 server.js 文件本身，或者更确切地说，它的功能可以只是纯 JavaScript，只要它完成相同的事情。

【讨论】：