我已经花了很多天努力弄清楚如何部署我的 Angular 和 ASP.NET Core 应用程序。该项目是使用 Visual Studio 2017 的 ASP.NET Core Web 应用程序 Angular 模板构建的，并在本地环境中正常工作。 Angular 应用程序运行并与 API 正确通信。
我尝试了许多不同的教程和博客文章(最著名的是 this one 和 this one )，但我似乎无法弄清楚。
我当前的方法是直接从 Visual Studio 发布到 Azure 应用服务，但单击发布时似乎无法构建应用程序。这些错误可以在下面的应用程序发布记录中看到，为了方便起见，我缩短了输出中的文件路径。当在本地环境中通过 Kestrel 构建和运行应用程序时，也会出现这些 typescript 错误，但是，应用程序可以正常工作(前端和后端)，因此我从未解决过这些问题。为什么这些错误会破坏发布版本而不是开发版本？
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 而言，我是否需要为 Release模式创建单独的配置文件？我问的原因是因为两个配置文件当前都将环境变量设置为“开发”？
Startup.cs
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"
}
}
}
}
任何帮助/指导将不胜感激。我只想知道部署应用程序的最佳和最简单的方法，因为这是一个让我非常烦恼的问题。难道是我全部配置错了？我需要寻找其他方法来部署它吗？谢谢
其他信息 - 运行 Angular 11.0.8 和 Typescript 4.0.5
更新1
感谢 Jason Pan 的评论，我研究并修复了 typescript 错误。就我而言，它们是由于在 Visual Studio 2017 上使用 TypeScript 4.0 引起的，而 VS 本身只有 3.0 的 TypeScript SDK。
为了发现这个错误，我使用了 solution found here 。然后我只需 install typescript 4.0 for visual studio from here并将我的 *.csproj 的 'TypeScriptToolsVersion' 标记更新为版本 4.0 。现在，应用程序的构建没有任何错误，并成功发布到我的 azure 应用服务。
但是，当我使用 URL“https://MyAppseb.azurewebsites.net/”访问该服务时，我现在遇到 500 内部服务器错误，但没有提供更多详细信息。现在这与我的应用程序的配置方式有关吗？
更新2
我终于能够将 Angular 应用程序部署到 azure 的网络服务。由于某种原因，当我在项目上单击“发布”时，它未能实际发布 Angular 应用程序，仅上传了 ASP.NET API 代码。因此，我手动发布了 Angular “dist”文件夹的内容，现在它可以工作了。我还必须更改startup.cs中的行
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "project-website/dist";
});
至
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "project-website/dist/project-website";
});
现在的问题是我无法向 API 发送请求。无论我发出什么请求，它都会返回 500 错误。例如 - https://<appname> .azurewebsites.net/api/{controller}/GetValues
最佳答案
我终于解决了为什么每次向 API 发送请求时 API 都会返回 500 错误的问题。
在使用 Kudu 检查“stdout”文件中的日志时，我发现了以下错误:
System.Data.SqlClient.SqlException (0x80131904): Invalid object name 'Clients'
就在那时，我意识到我未能在我的 Azure SQL 数据库上实际创建所需的表来匹配我的本地数据库。
为了解决此问题，我使用 SQL Server 登录到我的 Azure 数据库实例，然后创建所需的表，以匹配本地数据库中的架构。然后我刷新了应用程序，API 现在已正确命中。
关于c# - 无法将 ASP.NET Core 2.1 Angular 应用程序部署到 Azure，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66038036/