CODEWITHSUNDEEP
angulardockernpmdockerfile
Konrad Viltersten
Konrad Viltersten

Reputation: 39068

How to understand errors in my Dockerfile running Angular

I'm the totalest noob to Docker (while rather comfy with the rest of tech stack). Following roughly the Docker guide, I've landed in the following Dockerfile.

FROM angular/ngcontainer:latest
WORKDIR /ClientApp
COPY . .
RUN npm install --global @angular/cli
RUN npm install
CMD ["ng", "serve"]

I've checked and tried to understand all the best practices for Dockerfile design. Then, I created my images and started it like this (relying on the pre-existing image angular/ngcontainer).

docker build --tag ng-poc .
dock run --detach --publish 4343:4200 --name NgPocky --interactive ng-poc

It fails giving me the error log below. What I gather from it is that the ng command isn't found. When I tried the global add on my machine, it worked, so I suspect that it might be an error due to my lack of understanding how global the command becomes in a Linux environment (and/or errors in the Dockerfile itself, of course).

/home/circleci/.npm-global/bin/ng: line 2: use strict: command not found
/home/circleci/.npm-global/bin/ng: line 4: //: Is a directory
/home/circleci/.npm-global/bin/ng: line 5: //: Is a directory
/home/circleci/.npm-global/bin/ng: line 6: try: command not found
/home/circleci/.npm-global/bin/ng: ng: line 7: syntax error near unexpected token `('
/home/circleci/.npm-global/bin/ng: ng: line 7: ` process.title = 'ng ' + Array.from(process.argv).slice(2).join(' ');'

Not sure how to troubleshoot it further at this point.

Upvotes: 0

Views: 291

Answers (1)

Max
Max

Reputation: 7080

You must think to an image like a SO (or a sysprep SO).
The FROM ubuntu:latest is like get an ubuntu operating system then ...

On DockerHub you find already prepared images (like the above ubuntu) or other images with more contents like the python image who starting from alpine distro added the python language support.

You can know the CONTENT of the image reading the description or better the Dockerfile on GitHub if the image has a GitHub repo.

With this in mind, I suggest you to use a multi-stage build

For your problem you can:

Warning ! Pseudocode

FROM node:12 as build
WORKDIR /clientApp
COPY . .
RUN npm install --global @angular/cli
RUN npm build

FROM nginx:latest as runtime
COPY --from=build /compiledoutput /usr/share/nginx/html

For speedup build a better approach is to create a custom image with only @angular/cli like this

FROM node:12
RUN npm install --global @angular/[email protected]

docker build -t angularcli:11.1.14 .

And then instead of getting the node12 you can write

FROM angularcli:11.1.14 as build
WORKDIR /clientApp
COPY . .
# Not necessary -> RUN npm install --global @angular/cli
RUN npm build

FROM nginx:latest as runtime
COPY --from=build /compiledoutput /usr/share/nginx/html

Upvotes: 1

Related Questions