Question

angular local universal在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

有一篇关于server-side rendering的文章有助于阅读，我还强烈建议您在Git上查看Angular Universal-starter存储库。

请按照以下步骤告诉我它是否仍然有效：

构建服务器项目应用程序。
在您的localhost上运行它。 有用吗？
取决于您的构建和WebPack设置，您可能还需要上传node_modules目录。某些WebPack设置（例如Universal-starters）允许您仅部署dist目录，并且不需要node_modules。
在服务器上部署代码时，需要运行节点应用程序。您可以使用node dist/server.js或使用Nodejs生产流程管理器之一运行它，例如pm2或forever。
您需要将Nginx配置为重定向到已定义的Nodejs端口（4000或您导出的内容）

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

Answer 2

运行以下命令：

ng build --prod

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

Answer 3

我遇到了同样的问题。在localhost上，初始页面的响应在DevTools中打印路径的源，但不在生产中打印。事实证明，本地主机与生产的所有@angular软件包的版本不匹配。

Answer 4

在localhost工作但在服务器上生产产品时出现了同样的问题。原来是由于http协议引起的。在本地主机上是http，在服务器上是https，这导致某些资产请求失败。

angular universal在localhost上成功运行，而不是在生产服务器上

4 个答案: