Can't deploy Angular 8 CLI app as an Azure App Service

Question

I am using Angular 8 and Asp.Net Core 2.1. I first created my Asp.Net Core app using the Visual Studio template. I then opened a Command Prompt in the repo folder and created my Angular app using ng create MyClientApp. I am now using Visual Studio Code to manage the Angular portion of my app. If I run the app locally, everything works just fine. I'm trying to deploy the Angular app to an Azure App Service running the .NET v4.7 framework.

client runs on localhost:4200

api runs on localhost:5849/api

I'm now trying to deploy the Angular app as an Azure App Service and I can not get it to work.

Does anyone know an easy way to deploy the application using the Visual Studio Code? Ideally, I would like to use the Azure App Service extension.

node = v10.14.0

NPM = 6.4.1

I have noticed that if I run ng build, it builds out the full dist folder. If I run ng build --prod, it won't build the full dist folder. I see 40 or so errors like this.

ERROR in src/app/content/content.component.html(157,25): : Property 'userService' is private and only accessible within class 'ContentComponent'.

src/app/content/content.component.html(91,122): : Property 'filter' does not exist on type 'ContentComponent'.

I have also noticed that according to the Azure console, my App Service is running v0.10.40 for node and 1.4.28 for npm. I added this WEBSITE_NODE_DEFAULT_VERSION 10.14.0, but that didn't work.

I was hoping something like this would work. This works with ng build, but it doesn't work for me. https://dzone.com/articles/deploy-an-angular-app-from-visual-studio-code-to-a-1

UPDATE 1: Looks like node v10.14.0 is not supported. I'm now running v10.14.1 in my Angular app, and the Console reflects that, but it still does not work. I'm trying to see if it gives any errors.

Any help is much appreciated. Thanks!

Dumber_Texan2 Dumber_Texan2 · Accepted Answer · 2019-08-27T14:24:23

I finally got this working. The key was making sure to select the folder inside the dist folder (dist\myclientapp) when deploying the application. I then had to add the following web.config to the wwwroot folder using FTP. The final step is to restart the application.

<configuration>
<system.webServer>

<!-- indicates that the index.js file is a node.js application 
to be handled by the iisnode module -->

<handlers>
  <add name="iisnode" path="index.js" verb="*" modules="iisnode" />
</handlers>

<!-- adds index.js to the default document list to allow 
URLs that only specify the application root location, 
e.g. http://mysite.azurewebsites.com/ -->

<defaultDocument enabled="true">
  <files>
    <add value="index.js" />
  </files>
</defaultDocument>

</system.webServer>
</configuration>

Can't deploy Angular 8 CLI app as an Azure App Service

1 Answers