Recently, I was trying to publish a Single Page Application to Azure App Service and I encountered an error. So, let’s have a look at what that error was and why did I got it and how did I resolve it.

What we need ?

We will create the Visual Studio Angular application project. We will see how to use latest Angular framework application in the Visual Studio template.

We will also publish this project to Azure app service. So we will need Azure Subscription. If you don’t have an Azure subscription, create a free account before you begin.

Visual Studio Project

Create .NET Core Web Application using Visual Studio 2019. Make sure Angular option is selected in the project template type. This would create the project.

This project template is created to have both APIs and Front end application in a single project. This project has two main folders –

• Controllers for API controllers
• ClientApp for the Angular front end application.

The .NET Core web application has below middlewares which serve the Angular application.

• AddSpaStaticFiles
• UseSpaStaticFiles
• UseSpa

But there was an issue. As of today, the Angular application generated by this template is based on Angular 8. But I wanted to use Angular 9.

Angular 9 in the Project

I wanted to experiment with latest Angular 9 framework. So, I followed below steps to update the project

• Use Angular CLI to generate the new project (let’s say AngularApp). This will generate Angular 9 based project. Refer my previous blog post for creating project using Angular CLI.
• Delete contents of ClientApp folder which is part of Visual Studio project.
• Copy the contents of the new AngularApp project in ClientApp directory.
• Build and Run the application.

I did all above steps and everything was working as expected.

Error after publishing

So, I was ready to publish the application. So I right clicked on the project in Visual Studio and selected Publish option. Refer this documentation page for more details about the details about Publish to Azure App Service.

The publish was successful. Then I tried to access the application, but I was not able to see the home page of application.

So, I enabled browser debugging tools to see which HTTP status is returned. I was surprised to see that the site was returning HTTP 500 Internal Server Error.

Hmm. But why ?

Enabled exception page

To further debug this, I enabled the UseDeveloperExceptionPage middleware. By default, this middleware is applied only in the Development environment (refer .NET Core environment).

So, I moved this middleware outside the condition and commented the UseExceptionHandler from startup. Then, again republished the project to Azure.

The detailed error shown was as below:

Differences in Visual Studio and Angular CLI Templates

I found on GitHub issue for the same issue and figured out that there are some differences between the Angular App generated by using Visual Studio and the Angular App generated using CLI.

• app.server.module.ts and other configuration files related to server side rendering. It is enabled by Visual Studio Angular 8 based template. This is required only if you want to enable SSR in the Angular app. So, I was sure this was not the problem.
• Angular output path, the default output path in the Visual studio template expects the output path of compiled Angular scripts to be at ~/ClientApp/dist. But the AngularApp proejct generated using Angular CLI (in angular.json file) was ~/dist/AngularApp.

Refer below snapshot:

Resolution

So to resolve this I changed the output path from the angular.json file (path – ~/ProjectFolder/ClientApp/angular.json) and republished the application.

Then, I republished the application to check if this resolves the error.

And as I was expecting, the error was resolved.

So, we have seen how to use latest Angular framework with Visual Studio template. We also have seen that this may cause an error (and its resolution) if you want to publish that project to Azure App Service.

I hope you enjoyed this article. Let me know your thoughts.