无法将ASP.NET Core 2.1 Angular应用程序部署到Azure

我已经奋斗了很多天，以找出如何部署我的angular和ASP.NET Core应用程序。该项目使用Visual Studio 2017的ASP.NET Core Web应用程序Angular模板构建，并在本地环境中正常工作。angular应用程序将运行并与API正确通信。

我尝试了许多不同的教程和博客文章（最著名的是这本和本篇），但我似乎无法弄清楚。

我当前的方法是直接从Visual Studio发布到Azure应用服务，但是单击发布似乎无法构建应用程序。错误可以在下面的应用程序发布记录中看到，为了方便起见，我缩短了输出中的文件路径。在本地环境中通过Kestral构建和运行应用程序时，也会出现这些打字稿错误，但是，该应用程序正常工作（前端和后端），因此我从未解决它们。为什么这些错误会破坏发行版本而不是发行版本？

1>------ Build started: Project: WebAPI, Configuration: Release Any CPU ------
1>~\project-website\tsconfig.json(18,15): error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
1>~\project-website\node_modules\@types\node\assert.d.ts(2,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(53,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,94): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,101): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,104): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,98): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,105): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,108): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,47): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,53): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,56): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(99,61): error TS1005: Build:';' expected.
1>~\project-website\tsconfig.json(18,15): error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,60): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,61): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,75): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,77): error TS1011: Build:An element access expression should take an argument.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,40): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,46): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,38): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,44): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,65): error TS1005: Build:'>' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,85): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,87): error TS1005: Build:',' expected.
1>~\project-website\node_modules\@angular\forms\forms.d.ts(2727,88): error TS1109: Build:Expression expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(2,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(53,68): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,94): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,101): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(62,104): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,98): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,105): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(64,108): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,47): error TS1144: Build:'{' or ';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,53): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(72,56): error TS1005: Build:';' expected.
1>~\project-website\node_modules\@types\node\assert.d.ts(99,61): error TS1005: Build:';' expected.
1>WebAPI -> ~\bin\Release\netcoreapp2.1\WebAPI.dll
1>Done building project "WebAPI.csproj".
2>------ Publish started: Project: WebAPI, Configuration: Release Any CPU ------
C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.0\tsc.exe   --project "~\project-website\e2e\tsconfig.json" --listEmittedFiles --locale en-US --listFiles --noEmit
~\project-website\tsconfig.json(18,15): Error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
~\project-website\node_modules\@types\node\assert.d.ts(2,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(53,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,94): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,101): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,104): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,98): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,105): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,108): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,47): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,53): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,56): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(99,61): Error TS1005: Build:';' expected.
C:\Program Files (x86)\Microsoft SDKs\TypeScript\3.0\tsc.exe   --project "~\project-website\tsconfig.json" --listEmittedFiles --locale en-US --listFiles --noEmit
~\project-website\tsconfig.json(18,15): Error TS6046: Build:Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,60): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,61): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,75): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@angular\cdk\coercion\array.d.ts(10,77): Error TS1011: Build:An element access expression should take an argument.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,40): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(40,46): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,38): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\cdk\layout\breakpoints-observer.d.ts(47,44): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,65): Error TS1005: Build:'>' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,85): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,87): Error TS1005: Build:',' expected.
~\project-website\node_modules\@angular\forms\forms.d.ts(2727,88): Error TS1109: Build:Expression expected.
~\project-website\node_modules\@types\node\assert.d.ts(2,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(53,68): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,94): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,101): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(62,104): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,98): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,105): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(64,108): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,47): Error TS1144: Build:'{' or ';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,53): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(72,56): Error TS1005: Build:';' expected.
~\project-website\node_modules\@types\node\assert.d.ts(99,61): Error TS1005: Build:';' expected.
WebAPI -> ~\bin\Release\netcoreapp2.1\WebAPI.dll
WebAPI -> ~\obj\Release\netcoreapp2.1\PubTmp\Out\
Updating file (MyAppseb\web.config).
Updating file (MyAppseb\WebAPI.deps.json).
Updating file (MyAppseb\WebAPI.runtimeconfig.json).
Publish Succeeded.

2>Build failed. Check the Output window for more details.
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
========== Publish: 0 succeeded, 1 failed, 0 skipped ==========

解决此问题并发布该应用程序后，我仍然怀疑它不会正确运行，因为我不太了解如何配置某些文件（如startup.cs和launchsettings.json）进行发布。这两个文件的内容可以在下面看到。就startup.cs而言，我是否需要更改任何内容（例如cors策略，spa选项，源路径等）以进行发布？就launchsettings.json而言，我需要为发布模式创建一个单独的配置文件吗？我问的原因是因为两个配置文件当前都将环境变量设置为“开发”？

启动文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http.Features;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Server.Kestrel.Core;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using WebAPI.Data;

namespace WebAPI
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                    builder => builder.AllowAnyOrigin()
                        .AllowAnyMethod()
                        .AllowAnyHeader()
                        .AllowCredentials());
            });
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "project-website/dist";
            });
            services.Configure<FormOptions>(o => {
                o.ValueLengthLimit = int.MaxValue;
                o.MultipartBodyLengthLimit = int.MaxValue;
                o.MemoryBufferThreshold = int.MaxValue;
            });
            services.Configure<KestrelServerOptions>(options =>
            {
                options.Limits.MaxRequestBodySize = int.MaxValue; // if don't set default value is: 30 MB
            });
            services.AddDbContext<DissertationContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("ProjectLiveDB")));
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseCors("CorsPolicy");
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "project-website";

                if (env.IsDevelopment())
                {
                    spa.Options.StartupTimeout = new TimeSpan(0, 0, 120);
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }
    }
}

launchSettings.json

{
  "$schema": "http://json.schemastore.org/launchsettings.json",
  "iisSettings": {
    "windowsAuthentication": false, 
    "anonymousAuthentication": true, 
    "iisExpress": {
      "applicationUrl": "http://localhost:62508",
      "sslPort": 0
    }
  },
  "profiles": {
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "launchUrl": "",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "WebAPI": {
      "commandName": "Project",
      "launchBrowser": true,
      "launchUrl": "",
      "applicationUrl": "http://localhost:5001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

任何帮助/指导将不胜感激。我只是想知道最好的和最简单的方法来部署我的应用程序，因为这是一个困扰我的问题。我是否将所有配置错误？我是否需要查看其他部署方式？谢谢

附加信息-运行角度11.0.8和打字稿4.0.5

更新1

感谢Jason Pan的评论，我研究并修复了打字稿错误。就我而言，这是由于在Visual Studio 2017上使用打字稿4.0而VS本身只有3.0的打字稿SDK。

为了发现此错误，我使用了此处找到的解决方案。然后，我只需要从此处安装用于Visual Studio的Typescript 4.0，然后将* .csproj的'TypeScriptToolsVersion'标记更新为版本4.0。现在，该应用程序的构建没有任何错误，并已成功发布到我的azure应用程序服务。

但是，当我使用URL'https://MyAppseb.azurewebsites.net/'访问该服务时，现在出现500个内部服务器错误，没有提供更多详细信息。现在这与我的应用程序的配置有关吗？

更新2

我终于能够将angular应用程序部署到azure Web服务上。由于某些原因，当我在项目上单击“发布”时，它实际上未能发布有角度的应用程序，因此仅上载了ASP.NET API代码。因此，我手动发布了有角度的“ dist”文件夹的内容，现在它可以工作了。我还必须从以下位置更改startup.cs中的行：

services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "project-website/dist";
        });

至

services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "project-website/dist/project-website";
        });

现在的问题是我无法将请求发送到API。无论我发出什么请求，它都会返回500错误。例如<appname>-https ：// .azurewebsites.net / api / {controller} / GetValues