0

I am trying to create an image for my angular application for running unit and e2e tests. I started from the ubuntu image and then installed the other components. My dockerfile has the following statements.

FROM ubuntu:focal-20201008

RUN apt update && apt install -y \
    nginx \
    nodejs \
    npm \
    && npm install -g @angular/cli@9.1.12 \
    && rm -rf /var/lib/apt/lists/*

When I build the image using

sridhar@sridhar-HP-Laptop-15-H:~/abui/$ docker build --tag abui .

I get the following message (last few lines pasted here)

npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng

> @angular/cli@9.1.12 postinstall /usr/local/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js


The command '/bin/sh -c apt update && apt install -y     nginx     nodejs     npm     && npm install -g @angular/cli@9.1.12     && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 1

P.S. I don't want to start from the node docker image as of now

4
  • Have you checked whether the dependency names are all correct? the command returns non-zero code. Probably some syntax error. Try running each of them individually and find which statement is wrong. – coolmego Nov 12 '20 at 16:42
  • These are probably due to several factors 1. Angular prompts if analytics should be shared with the angular team. Tis should be turned off using ng analytics off 2. There are several depreciated packages in my case for angular 9.1.12 I had the following : tslint@6.1.3, request@2.88.2, chokidar@2.1.8, har-validator@5.1.5, fsevents@1.2.13, urix@0.1.0, resolve-url@0.2.1 jquery@1.9.1, popper.js@^1.16.1 @angular/common@^9.0.0, @angular/core@^9.0.0, tslib@^1.10.0 – sridhar pandurangiah Nov 13 '20 at 8:00
  • Initially tried this with Ubuntu image. Then switched to the node image. But the results are similar but using the node image I get to see the node messages. Most literature on the web suggest installing angular locally within the project and then copying them to the container. That increases the size of the context. But I guess that's the only way out. Still trying out different things. Will post my learnings once I have a working image. – sridhar pandurangiah Nov 13 '20 at 8:00
  • for the first angular prompts you can do somethink like: "set +o pipefail" and then passing yes while installing angular and then "set -o pipefail". This should make your script run without failures. – coolmego Nov 13 '20 at 9:18
1

Finally managed to generate the docker image for Angular. Here are is the screnshot.

enter image description here

I am listing the contents of the Docker File along with the comments that explain the reasoning and my learnings.

# Created by Sridhar Pandurangiah - 29 October 2020
# This Docker file helps create the containers for the Angular User Interface
#1 We would like to create from the node image and then add the layers. I had initially started from a base image and proceeded to add Ubuntu, it did not work out as creating a ubuntu from the base involves a lot of work and its rather baseless to start from a base image. Then switched to starting from the Ubuntu image and the problems I faced is documented in this question. So had to start from the node image. Also remember that docker containers have to address a single concern.

FROM node:15.1.0 as ab-suite-image

#Add Information about this image
LABEL maintainer="sridhar@st.in"
LABEL version="1.0"
LABEL decsription="This is a docker image built from the node image and includes angular9 and metronic theme"

#2 Add Angular and other peer dependencies that do not get installed by default to avoid the build from exiting with errors
RUN npm install -g @angular/cli@9.1.12 @angular/core @angular/common eslint chokidar jquery popper.js tslib --save

# Set environment variables for file locations if required

#3 Set the environment Variable to determine the environment where the application is deployed development | testing | staging | production
ENV AB_COMPLIANCE_ENV=development

#4 Set the working directory to copy the angular dependencies
WORKDIR /opt/ng

#5 We don't pull the code from GIT as it would mean storing the private ssh keys on a docker image that can be publicly accessed. This is is not advisable.
COPY package.json ./

#6 Update project dependencies using package.json. This stage is where we encountered a lot of issues with build failing as the shell scripts were returing errors. the flag --legacy-peer-deps ensures that the npm doesn't throw errors so the docker build continues
RUN npm install --legacy-peer-deps

#7 Copy all the other project files and build
COPY . ./
RUN ng build


#8 Configure Volumes if required

#9 Copy start Script if required
#COPY start.sh /start.sh
#CMD ["./start.sh"]

#10 Expose Port for the application
EXPOSE 4200 443

This docker image can be used to for running unit and E2E tests.

Some literature on the web ask you to install nginx but not advisable. Run nginx on a seperate dedicated container. On production you can build the angular application with the "prod" flag and copy the files so that nginx can serve them.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.