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.