Dockerize Angular 9-10 App With Cached Dependencies

#angular #docker #node #webdev

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.