DEV Community

Egor Pavlikhin
Egor Pavlikhin

Posted on

2

Dockerize Angular 9-10 App With Cached Dependencies

I've had a perfectly fine Angular app built into a Docker container image, which became terribly slow to build after upgrading to Angular 9, with build process recompiling dependencies with ngcc every single build.

Compiling @angular/core : fesm5 as esm5

Here are the steps that you need to take to make your builds fast again.

1) Add .dockerignore file

node_modules
.git
.gitignorenpm

2) Add default.conf (this is for your nginx server)

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri$args $uri$args/ $uri $uri/ /index.html =404;
  }
}

3) Add Dockerfile

### STAGE 1: Build ###
FROM node:14.8.0-alpine AS build

WORKDIR /usr/src/app
ENV PATH=${PATH}:./node_modules/.bin
ENV NODE_PATH=/usr/src/app/node_modules
ADD package.json ./
ADD package-lock.json ./
RUN npm ci
RUN ngcc
ADD . .
RUN ng build --prod

### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
COPY --from=build /usr/src/app/dist/web /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

4) Profit. Run docker build . and enjoy. NGCC will cache built dependencies now and subsequent builds will be as fast as usual.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Top comments (2)

Collapse
 
josematheus10 profile image
José Matheus Noveli

It didn't work here :(

The command '/bin/sh -c ng build --prod' returned a non-zero code: 1

Collapse
 
egorpavlikhin profile image
Egor Pavlikhin

Usually the error will be somewhere a few lines above that.

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon