Can't dockerize angular application

Question

I have been trying to push a docker image of my angular application to azure, without success.

I followed the steps in the video on this page: https://docs.microsoft.com/en-us/azure/developer/javascript/tutorial-vscode-docker-node-01?tabs=bash , however I get the :( Application Error screen. I then tried to run the docker container locally and that gave me the following error:

$ docker run angdocker

> angdocker@0.0.0 start /usr/src/app
> ng serve

sh: ng: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! angdocker@0.0.0 start: `ng serve`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the angdocker@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2020-08-27T04_17_03_098Z-debug.log

I will point out I am on Ubuntu 20.0.4 and this is a simple angular application which I started using the ng new command and did not edit. I just used the VS code generate dockerfile image to create the image and worked from there. Any help will be appreciated, thanks!

Answer 1

It seems like you need to install the dependencies, use the npm install before ng serve . or you can write this in your Dockerfile, You also need a server which will serve HTTP requests. like nginx.

or you can follow this Dockerfile. to create the docker image

# stage 1   
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --prod
    
# stage 2
FROM nginx:alpine
COPY --from=node /app/dist/angular-app /usr/share/nginx/html