How to fix module not found error, when ng serve is run in an app service

Question

Hello, I made an angular test application to see if I could get it to run in an app service, to try and fix an error in a different project.
The application is the basic application you get, when creating a new angular app. I then pushed it to a GitHub repo and created an app service, which gets the project from GitHub, via the action workflow YAML file it creates (also uploaded with the post), when creating the deployment. Everything works and the deployment succeeds, but upon accessing the URL, I get an application error.

Upon further investigating, I looked into the docker logs, which I have uploaded with this post and saw, that the container tries to serve the application with ng serve. I don't quite understand why azure chooses this approach to host a web app, since the build artifacts are already present. So if this could be clarified or a link to the documentation for this could be posted, I would be very thankful.

It then fails to find the ./boostrap module, which is being found when running and building locally or in the GitHub actions workflow. I have absolutely 0 clue on how to add the module or even make it not use ng serve and simply host the build artifacts. Any help is welcome.

2024_09_11_ln1xsdlwk000034_docker.log
2024_09_11_ln1xsdlwk000034_default_docker.log
Main Frontend Test2.txt <- github actions workflow created by the app service, I only removed the run test step.

Best regards

Nils

Answer 1

Hi ,

Azure App Service is defaulting to ng serve because it detects a Node app (not a static build), but Angular apps must be built (ng build) and served as static files (e.g., via nginx or Azure Static Web Apps) so fix it by deploying the /dist folder and configuring App Service to serve static content instead of running ng serve.

If the reply is helpful, please click Accept Answer and kindly upvote it. If you have additional questions about this answer, please click Comment.