上下文

Question

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

上下文

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

我没想到的是angular-cli是如此自以为是，它甚至要求我将index.html文件保存在我的存储库中的angular app目录中（我以前将它保存在/ views for express中。 js发送给客户）。

问题

如果我有node.js服务器，我很难看到如何从angular-cli加载输出的JS包。请考虑以下angular-cli.json代码段：

"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 服务器的相对方式指向 / ，例如：

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

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

Answer 2

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

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

如何使用angular-cli加载包？

上下文

问题

2 个答案: