I have been struggling for many days now to figure out how to deploy my angular and ASP.NET Core application. The project is built using visual studio 2017's ASP.NET Core Web Application Angular template and works correctly in the local environment. The angular app runs and correctly communicates with the API.
I have tried many different tutorials and blog posts (most notably this one and this one) and I cannot seem to figure it out.
My current approach is to publish directly from visual studio to an Azure App Service but it appears to fail building the application when publish is clicked. The errors can be seen below in the transcript of the application publishing, I have shortened file paths in the output for ease. These typescript errors also appear when building and running the application through Kestrel in a local environment, however, the application works correctly (front and back end) so I never addressed them. Why do these errors break the release build but not the development build?
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 ==========
After this issue is resolved and the application can be published I still suspect it will not run correctly due to me not really knowing how to configure certain files such as startup.cs and launchsettings.json for release. The contents of both files can be seen below. in terms of startup.cs do I need to alter anything such as cors policies, spa options, source path etc for release? In terms of launchsettings.json do I need to create a separate profile for release mode? The reason I ask is because both profiles currently have environment variables set to 'Development'?
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"
}
}
}
}
Any help/guidance will be greatly appreciated. I just want to know the best and easiest way to deploy my application as this is a problem that has been very annoying to me. Have I configured it all wrong? Do I need to look at other ways to deploy it? Thanks
Additional Info - Running angular 11.0.8 and typescript 4.0.5
Update 1
Thanks to the comments from Jason Pan I researched and fixed the typescript errors. In my case, they were caused by using typescript 4.0 on visual studio 2017 with VS itself only having a typescript SDK of 3.0.
To spot this error I used the solution found here. I then simply had to install typescript 4.0 for visual studio from here and update my *.csproj's 'TypeScriptToolsVersion' tag to version 4.0 . The application now builds without any errors AND successfully publishes to my azure app service.
However, when I access the service using the URL 'https://MyAppseb.azurewebsites.net/' I am now greeted with a 500 internal server error with no more details provided bar that. Is this now to do with how my application is configured?
Update 2
I have finally been able to deploy the angular application to the azure web service. For some reason when I clicked 'publish' on the project it failed to actually publish the angular application, only the ASP.NET API code was uploaded. Therefore I manually published the contents of the angular 'dist' folder and it now works. I also had to change the line in startup.cs from
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "project-website/dist";
});
to
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "project-website/dist/project-website";
});
Now the issue is I cannot send requests to the API. It returns a 500 error no matter what request I make. For example - https://<appname>.azurewebsites.net/api/{controller}/GetValues
