如何使用 angular-cli 加载捆绑包？

Question

我必须在这里遗漏一些非常简单的东西，因为我不明白任何人如何能够拥有一个正常运行的 angular-cli 应用程序而没有能力执行以下操作......

上下文

我有一个带有 express.js 后端的 Angular 2 应用程序作为 API。我已经从 webpack 切换到 angular-cli 来捆绑我的文件，因为它提供了简单的 Ahead-Of-Time 编译。

我没想到的是 angular-cli 如此固执己见，它甚至要求我在我的存储库的 angular app 目录中保留一个 index.html 文件（我之前将它保存在 /views 中以供 express.js 使用）发送给客户）。

问题

如果我有 node.js 服务器，我正在努力查看如何从 angular-cli 加载输出的 JS 包。考虑以下angular-cli.jsonsn-p：

"apps": [
{
    "root": "app",
    "outDir": "public/dist",
],

我的bundle.js 文件和我的index.html 都将在public/dist 中输出。这意味着我必须更新我的 node.js 路由才能更改：

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

到：

// Root
app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/../public/dist/index.html'));
});

现在的问题是我的public/dist/index.html 文件有一个<base href="/"> 标记，以及以下生成的脚本标记：

<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script>

嗯，很明显，当我运行我的 node.js 服务器时，将找不到上面的那些包，因为它们不存在于基本 href 的位置。没有/inline.bundle.js，因为它位于/public/dist/inline.bundle.js。那么，我该如何加载我的前端应用程序？

Answer 1

我不认为这会起作用，因为它需要一个绝对路径，而不是相对路径。

res.sendFile(path.join(__dirname + '/../public/dist/index.html'));

您应该以相对方式将所有 dist 服务器指向 express 文件夹中的 /，例如：

app.use('/', express.static('../public/dist'));

app.get('*', (req, res) => {
    res.sendFile('index.html', { root: '../public/dist' });
});

Answer 2

我以不同的方式处理这类问题。我从不使用sendFile 发送文件，而是只发送 JSON 数据。

发送文件适用于传统的非 SPA 应用程序。发送 JSON 数据适用于现代 SPA 应用程序。