How do I fix Docker getting stuck at "RUN npm run build" with Angular 15

Question

I'm trying to build an Angular 15 project in Docker, but the build always hangs at the RUN npm run build step and never completes. This a fresh install ng new ng-sandbox-15 with the Dockerfile, .dockerignore, and nginx.conf copied from a working Angular 14 fresh install.

./Dockerfile

FROM node:16-alpine as builder

# Copy dependency definitions
COPY package.json package-lock.json ./

# disabling ssl for npm for Dev or if you are behind proxy
RUN npm set strict-ssl false

## installing and Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm ci && mkdir /app && mv ./node_modules ./app

# Change directory so that our commands run inside this new directory
WORKDIR /app

# Get all the code needed to run the app
COPY . /app/

# Build the application
RUN npm run build


FROM nginx:1.17-alpine
## From 'builder' copy published folder
COPY --from=builder /app/dist /usr/share/nginx/html

COPY nginx/nginx.conf /etc/nginx/nginx.conf

# Expose the port the app runs in
EXPOSE 4000

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

./package.json:

{
  "name": "ng-sandbox-15",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.5",
    "@angular/cli": "~15.2.5",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

As seen in the image below, the Angular build completes successfully in 26.5 seconds, but the step is still stuck 20+ minutes later.

The most similar problem I've seen is Docker build getting stuck at npm run build step, and I disagree with the only proposed answer CMD ["npm", "run", "build"] because that will not wait for the build to complete before trying to copy the built project into the nginx html directory.

Hardden

Answer 1

I face the same issue when updated my angular 13 projects to 15.

I have 4 projects, 2 will build success and 2 will stuck after the RUN npm run build. After compare the projects I found out in my case is causing by the analytics inside the angular build.

Change the parameter in angular.json from

"cli": {
  "analytics": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXX",
},

to

"cli": {
  "analytics": false,
},

This solution solved my issue. The root cause may be causing by upload the analytics data are blocked inside docker build

Granjon

Excellent! This solved my issue completely. This is probably worth a bug report on the Angular GitHub repo. – Hardden

Excellent!! This solved my issue completely as in our pipeline we don't have internet access which cause a huge delay in the build time after the build process hanged – Carthy

Answer 2

I had the same issue when upgrade to angular 17, and the voted answer did not work for me. The thing that worked for me is that I changed the node build image from latest to 18.13 since Angular 17 works on Node 18.13 and newer. There must be some bug in the Node version, I'm not sure. Hope this help someone

Causation

Answer 3

Can you check the copy path it should be ./ not . / in the docker file.

Also please look into the below code

1. Installing and storing node modules on a separate layer will prevent unnecessary npm installs at each build:

RUN npm install && mkdir /app && mv ./node_modules ./app

2. Change directory so that our commands run inside this new directory:

WORKDIR /app

3. Get all the code needed to run the app

COPY ./ /app/

Akkad

Changing the copy path to ./ did not seem to help. The Docker code referenced all work correctly with my Angular 14 project. I've reviewed them, and they look appropriate to me. – Hardden

./ or . is the same thing. – Cubic

Answer 4

I had a similar issue when was bulding an image for React app. I was doing this on a server and found that image building was taking all CPU and RAM (1 CPU, 1GB RAM). In other words the server was not powerful enough. I added 1 GB to RAM and this fixed the issue.

Fishmonger