Building Angular application with Docker on Google Container Builder fails

Question

I am trying to build Angular application with the following Dockerfile using 'Google Container Builder' on GCP and it fails with error code

### STAGE 1: Build ###

# We label our stage as ‘builder’
FROM node:8.1.4-alpine as builder

COPY package.json  ./

## Storing node modules on a separate layer will prevent unnecessary npm installs at each build.
# RUN npm cache clean
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Checking node version and that it can be accessed irectly
RUN node --version

## ng Version check
RUN $(npm bin)/ng --version

## Build the angular app in production mode and store the artifacts in dist folder
RUN node --max-old-space-size=8192 $(npm bin)/ng build --prod --aot --build-optimizer --no-progress
##RUN $(npm bin)/ng build --prod ## Fails also


### STAGE 2: Setup ###

FROM nginx:1.13.3-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From ‘builder’ stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

I am launching it as follows

stage('Build and push image with Container Builder') {
     // ----------------------------------------------------------
     // Apparently there is an issue with multi-stage builds on Jenkins 
     // Build using container builds and push to container registry (120 mins of free daily for builds included)  
      steps {
        container('gcloud') {
          dir('./AlbumFoo.Web') {
            sh "PYTHONUNBUFFERED=1 gcloud builds submit --tag ${imageTagAlbumWebsite} ."
          }
        }
      }
    }

It starts out getting npm packages and all, fails on step where it actually does the build, i.e at

RUN node --max-old-space-size=8192 $(npm bin)/ng build --prod --aot --build-optimizer --no-progress

Fails with "gcr.io/cloud-builders/docker" failed: exit status 139

Answer 1

There were conflicting package references including @angular/cli: 1.7.0 and "@angular-devkit/build-angular": "~0.6.0" in package.json which I have fixed.

I also updated docker file

### STAGE 1: Build ###

# We label our stage as ‘builder’
FROM node:10.0.0 as builder

#Cleanup
RUN npm cache clean --force
#RUN rmdir node_modules /s /q
RUN npm install -g [email protected]


COPY package.json  ./

## Storing node modules on a separate layer will prevent unnecessary npm installs at each build.
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Checking node version and that it can be accessed irectly
RUN node --version

## ng Version check
RUN $(npm bin)/ng --version

##RUN npm rebuild node-sass --force

## Build the angular app in production mode and store t he artifacts in dist folder
##RUN node --max-old-space-size=8192 $(npm bin)/ng build --prod --aot --build-optimizer --no-progress
##RUN REM call npm install -g @angular/cli
RUN $(npm bin)/ng build --prod 


### STAGE 2: Setup ###

# base image
FROM nginx:1.13.9-alpine

# copy artifact build from the 'build environment'
COPY --from=builder /ng-app/dist /usr/share/nginx/html

# expose port 80
EXPOSE 80

# run nginx
CMD ["nginx", "-g", "daemon off;"]

I eventually created a basic docker image and ran the steps defined in Dockerfile one at a time to isolate the root cause by ssh into the container.