在同一個Azure Web應用程序中部署angular 6應用程序和Web API

Question

我正在按照這種策略在同一個Azure Web應用程序中部署angular應用程序和web api。

我在VS 2017中使用VSCode和Web Api開發了Angular應用。因此，它不是 VS 2017的Angular App模板中的完整應用

我部署了Web API

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist";
});

和

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
});

將角度應用程序的內部版本復制到Azure Web App的ClientApp/dist文件夾中。 將azure應用的WEBSITE_NODE_DEFAULT_VERSION設置為10.14.1 。

但是，當我瀏覽網站時，瀏覽器控制台出現錯誤-

SyntaxError: expected expression, got '<'[Learn More] runtime.js:1
SyntaxError: expected expression, got '<'[Learn More] polyfills.js:1
SyntaxError: expected expression, got '<'[Learn More] styles.js:1
SyntaxError: expected expression, got '<'[Learn More] scripts.js:1
SyntaxError: expected expression, got '<'[Learn More] vendor.js:1
SyntaxError: expected expression, got '<'[Learn More] main.js:1 

我看到，所有請求都在獲取index.html，而不是實際的.js文件。

似乎沒有啟動帶有節點的角度應用程序。

Answer 1

建議您將Angular應用程序移動到Azure存儲靜態網站服務。 這將非常容易部署，並且資源使用率（I / O，CPU，內存等）應較低。 看到：

• Azure存儲中的靜態網站托管

• 現在通常可以使用Azure存儲上的靜態網站

更新

看看如何使用Angular中的environment.ts文件分離生產和開發HTTP URL ，了解如何傳遞API的URL以及如何為不同的環境管理不同的URL。

更新2

您還可以按照本指南檢查啟動代碼中是否缺少任何內容。

希望能幫助到你！