如何使用angular-cli加載捆綁包？

Question

我在這里肯定會錯過一些非常簡單的東西，因為我不明白沒有以下功能，沒有人能擁有一個運行正常的angular-cli應用...

語境

我有一個帶有express.js后端的Angular 2應用程序，充當API。 我已經從webpack切換到angular-cli來捆綁我的文件，因為它可以輕松進行提前編譯。

我沒想到的是angular-cli如此固執己見，它甚至需要我將index.html文件保存在我的存儲庫中的angular應用程序目錄中（我以前將它保存在/ views中，以便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服務器指向express文件夾中的/從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應用程序。