在同一个Azure Web应用程序中部署angular 6应用程序和Web API-电脑我帮您

在同一个Azure Web应用程序中部署angular 6应用程序和Web API

我正在按照这种策略在同一个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文件。

似乎没有启动带有节点的角度应用程序。

回答如下：

建议您将Angular应用程序移动到Azure存储静态网站服务。这将非常容易部署，并且资源使用率（I / O，CPU，内存等）应较低。看到：

Azure存储中的静态网站托管
现在通常可以使用Azure存储上的静态网站

更新

看看如何使用Angular中的environment.ts文件分离生产和开发HTTP URL ，了解如何传递API的URL以及如何为不同的环境管理不同的URL。

更新2

您还可以按照本指南检查启动代码中是否缺少任何内容。

希望能帮助到你！