How to speed up Angular's dev server startup in Docker?

Viewed 1066

I have an issue running an Angular app through a Docker container while the source is attached via volume. The ng serve startup is incredibly slow.

My goal is to dockerize the development process (on Windows). For reference, the dummy project is available on GitHub: https://github.com/csgulyas/node-docker-angular

I have the following versions of things:

Docker version 19.03.12, build 48a66213fe
docker-compose version 1.27.2, build 18f557f9

Running under WSL2:
  NAME                   STATE           VERSION
* Ubuntu-20.04           Running         2
  docker-desktop-data    Running         2
  docker-desktop         Running         2

I've not done anything other than generating an angular project via ng new, and added

the Dockerfile:

FROM node:12.18.4-alpine AS dev # latest LTS node

EXPOSE 4242 # just so it isn't 4200
EXPOSE 49153 # apparently this is for change detection

USER node

RUN mkdir -p /home/node/.npm-global
ENV PATH=/home/node/.npm-global/bin:$PATH
ENV NPM_CONFIG_PREFIX=/home/node/.npm-global

RUN npm install -g @angular/cli
WORKDIR /app

CMD ["ng", "serve", "--port", "4242", "--host", "0.0.0.0", "--disable-host-check", "--poll", "1000"]

and the docker-compose.yml

version: '3.4'

services:
    angularapp:
        container_name: angularapp
        image: ${DOCKER_REGISTRY-}webapp
        build:
            context: ./demo-frontend
            dockerfile: Dockerfile
        ports:
            - "4200:4242"
            - "49153:49153"
        environment:
            NODE_OPTIONS: --max_old_space_size=4096
        volumes:
            - ./demo-frontend:/app

While monitoring the output of the container, I get the following

angularapp    | 2020-09-29T13:18:32.802573300Z Your global Angular CLI version (10.1.3) is greater than your local
angularapp    | 2020-09-29T13:18:32.802597400Z version (9.1.12). The local Angular CLI version is used.
angularapp    | 2020-09-29T13:18:32.802601300Z
angularapp    | 2020-09-29T13:18:32.802603800Z To disable this warning use "ng config -g cli.warnings.versionMismatch false".
angularapp    | 2020-09-29T13:19:50.000172200Z WARNING: This is a simple server for use in testing or debugging Angular applications
angularapp    | 2020-09-29T13:19:50.000214200Z locally. It hasn't been reviewed for security issues.
angularapp    | 2020-09-29T13:19:50.000221200Z
angularapp    | 2020-09-29T13:19:50.000223800Z Binding this server to an open connection can result in compromising your application or
angularapp    | 2020-09-29T13:19:50.000226100Z computer. Using a different host than the one passed to the "--host" flag might result in
angularapp    | 2020-09-29T13:19:50.000228700Z websocket connection issues. You might need to use "--disableHostCheck" if that's the
angularapp    | 2020-09-29T13:19:50.000231000Z case.
angularapp    | 2020-09-29T13:19:50.000709400Z WARNING: Running a server with --disable-host-check is a security risk. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a for more information.
angularapp    | 2020-09-29T13:20:10.731395000Z
angularapp    | 2020-09-29T13:20:10.731441600Z chunk {main} main.js, main.js.map (main) 57.7 kB [initial] [rendered]
angularapp    | 2020-09-29T13:20:10.731452000Z chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
angularapp    | 2020-09-29T13:20:10.731457200Z chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
angularapp    | 2020-09-29T13:20:10.731461400Z chunk {styles} styles.js, styles.js.map (styles) 12.7 kB [initial] [rendered]
angularapp    | 2020-09-29T13:20:10.731464600Z chunk {vendor} vendor.js, vendor.js.map (vendor) 2.71 MB [initial] [rendered]
angularapp    | 2020-09-29T13:20:10.731468000Z Date: 2020-09-29T13:20:10.730Z - Hash: 71f01e77608773fbaa56 - Time: 11928ms
angularapp    | 2020-09-29T13:20:10.732294000Z ** Angular Live Development Server is listening on 0.0.0.0:4242, open your browser on http://localhost:4242/ **
angularapp    | 2020-09-29T13:20:10.732720500Z : Compiled successfully.

This is the output of the 2nd run of the container, the first one takes a bit longer for first time compilation I'm guessing. If you look at the 5th line, it took over a minute to progress the initialization, and start the compilation.

I've looked around what may be the cause, most common recommendation was to increase the memory limit of node. I did that in the compose file via environment variable.

Edit: It appears this is an issue with Windows, WSL2, and Docker volumes. I read about issues with file system access being slow from a container to the Windows host under WSL2. Ran the project in a cloud VSP under Ubuntu 20.04 and the Angular dev server spun up as fast as the cloud resources allowed it.

1 Answers

It's not a problem of angular itself.

WSL2 has an issue with filesystem performance on /mnt.

A little you can do is to add your project and node process to Exclusion for Windows Defender. It might help a little, but don't expect too much.

For now, while the WSL performance issue is not fixed, I'd recommend to run development locally using gitbash and use docker only on production.

Related