捆绑 angular 2 个应用程序与快递

Question

好的，所以我 bundled/built 一个常规的 angular cli 项目使用 webpack for prod，然后将 dist 文件夹的内容放入另一个安装了 express 的项目中。
代码：

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/' + 'index.html')
});

app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});

问题是，当我运行这个时，我在 ://localhost:3000/ 上得到一个 "loading..." 页面，除此之外什么都没有。当我检查控制台时，出现这些错误

[无法加载资源：服务器响应状态为 404（未找到）://localhost:3000/inline.js
加载资源失败：服务器响应状态为 404（未找到）://localhost:3000/styles.b52d2076048963e7cbfd.bundle.js
加载资源失败：服务器响应状态为 404（未找到）://localhost:3000/main.d27eab344e583f765067.bundle.js
加载资源失败：服务器响应状态为 404（未找到）://localhost:3000/styles.b52d2076048963e7cbfd.bundle.js
加载资源失败：服务器响应状态为 404（未找到）://localhost:3000/main.d27eab344e583f765067.bundle.js]

有人解决这个问题或找出问题所在吗？任何帮助是极大的赞赏。我这样做的原因是，一旦应用程序投入生产，我就无法访问 "npm"，所以我没有任何 ang-cli 命令，只有节点命令。实现套接字 IO 也是我们走快速路线的另一个原因。如果有任何替代方法，请告诉我。

谢谢

Answer 1

您需要提供其余的静态文件，因为现在您只发送 index.html。

将您的 angular 应用程序放在某个目录中，例如 public 并执行以下操作：

app.use(express.static('public'));
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/public' + 'index.html')
});

Answer 2

我为这个问题找到的解决方案是将 2 个组件放在单独的目录中，并以这种方式构建它们（不要忘记之前每次都更改到您的 comp. 目录）：

ng build --base-href /first/dist
ng build --base-href /second/dist

那么你的两个组件在两个不同的目录中

快递：

app.use(
    '/first',
    express.static(
        path.join(__dirname,'first', 'dist')
    )
);

和

app.use(
    '/second',
    express.static(
        path.join(__dirname,'second', 'dist')
    )
);

他们应该是更好的解决方案，但我还没有找到

希望对您有所帮助

格雷瓜尔 - 你可以在 www.agenda.tools

上找到它的工作站点

捆绑 angular 2 个应用程序与快递

Bundeled angular 2 app with express

web-services

node.js

express

angular-cli

angular