角度通用在本地主机上成功工作而不是在生产服务器上

Question

angular 通用在 localhost 上成功运行，但是当使用 nginx 页面视图源部署到生产时仅显示静态内容，但相同的代码在 localhost 中运行。

我还通过禁用浏览器的 js 进行了测试，localhost 正在按预期运行，但是当再次部署到生产服务器时，只会呈现静态组件。

请帮忙。

// These are important and needed before anything else
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';

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

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

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

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

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', join(DIST_FOLDER, 'browser'));

// TODO: implement data requests securely
app.get('/api/*', (req, res) => {
  res.status(404).send('data requests are not supported');
});

// Server static files from /browser
app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
});

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

Answer 1

在 localhost 工作但服务器上的 prod 没有工作的地方有同样的问题。原来这是由于http协议。在 localhost 上是 http，在服务器上是 https，这会导致一些资产请求失败。

Answer 2

我遇到了同样的问题。在 localhost 上，初始页面的响应会在 DevTools 中打印路由的源，但不会在生产环境中打印。原来这是本地主机与生产上所有@angular包的版本不匹配。

Answer 3

有一篇关于server-side rendering的文章对阅读很有帮助，我也强烈建议你看看Git上的Angular Universal-starter存储库。

请按照以下步骤操作，如果还不行，请告诉我：

1. 构建服务器项目应用程序。
2. 在您的本地主机上运行它。 有效吗？
3. 取决于您的构建和 WebPack 设置，您可能还需要上传 node_modules 目录。某些 WebPack 设置（如 Universal-starters）允许您仅部署 dist 目录，而无需使用 node_modules。
4. 在您的服务器上部署代码后，您需要运行您的节点应用程序。您可以使用 node dist/server.js 或使用 Nodejs 生产流程管理器之一运行它，例如 pm2 或 forever。
5. 您需要配置 Nginx 以重定向到定义的 Nodejs 端口（@98​​7654332@ 或您导出的端口）

如果您按照上述说明操作，它有望正常工作。

Answer 4

运行以下命令：

ng build --prod

这将在根项目中生成 dist 文件夹。 dist 的内容是部署应用程序所需的内容。