在同一个 Azure Web 应用中部署 Angular 6 应用和 Web API

Question

我遵循this 策略在同一个 Azure Web 应用中部署 Angular 应用和 Web api。

我在 VS 2017 中使用 VSCode 和 Web Api 进行 Angular 应用程序开发。所以它不是像 VS 2017 中的 Angular 应用程序模板中的完整应用程序

我用

部署了 web api

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

和

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

已将 Angular 应用程序的构建版本复制到 Azure Web 应用程序上的 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、内存等）也应该更低。见：

• Static website hosting in Azure Storage

• Static websites on Azure Storage now generally available

更新

查看Separating production and development HTTP URLs using environment.ts file in Angular，了解如何传递您的 API 的 URL，并为不同的环境管理不同的 URL。

更新 2

您也可以关注this guide 并检查您的启动代码中是否缺少任何内容。

希望对你有帮助！