How to understand errors in my Dockerfile running Angular

Question

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.

Maybe the problem is the fact that this angular/ngcontainer is 2 years old, and likely out of date. Find a newer image/container to work from. — R. Richards
– R. Richards, Commented Feb 6, 2021 at 21:34
@R.Richards I have no reference to "old" in regard to dockering, so I appreciate your comment. What's confusing me is how to discriminate between the different alternatives out there. I expected Google to provide a go-to image, a recommended builder plate to start with. Ultimately, I want to run my environment and not some random dude's. But it's not clear to me where to get the most vanilla, pristine and plain basic case to put in my FROM. (And apparently, I picked wrongly.) Thoughts on that? — Konrad Viltersten
– Konrad Viltersten, Commented Feb 7, 2021 at 8:28
Disclaimer: I don't work with angular. You must this to an image like a SO (or a sysprep SO). With this in mind, I suggest you to start (read: FROM) an ubuntu image. On DockerHub you find prepared images: you must read the CONTENT of the image on description or better if the image has a GitHub repo where you can look at the Dockerfile and understand which contains. — Max
– Max, Commented Feb 7, 2021 at 11:58
@Max Thanks. It helped. IN fact, you not coming from Angular direction is an advantage in this case. I want to grasp a better understanding of how Docker operates and then apply it on .NET/Angular-combo. So technological agnosticism is preferred. That being said, wouldn't it make sense to FROM node, compile the project producing the executable artifacts and then FROM nginx to serve them? Or is it generally a less painful approach to go with vanilla Ubuntu, install NodeJs on it and do all the magic there? I'm fine with opinionated input too. :) — Konrad Viltersten
– Konrad Viltersten, Commented Feb 7, 2021 at 15:46
First is preferable (in my opinion). FROM node -> build then FROM nginx -> serve. A typically multi-stage build. Notice the COPY --from — Max
– Max, Commented Feb 7, 2021 at 16:10

Max · Accepted Answer · 2021-02-07 17:36:14Z

1

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

answered Feb 7, 2021 at 17:36

Max

7,1503 gold badges51 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Konrad Viltersten Over a year ago

Wow! This reply actually got even better than the collected contents of the comments. Awesome. Just to verify - the setup you describe consists of a single container running, right? One that compiles the stuff and serves them in one, smooth dockerization (though built on a two-step schema).

Collectives™ on Stack Overflow

How to understand errors in my Dockerfile running Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related