How to configure `ng serve` to catch changes in a dockersized Angular 2 app? How to configure `ng serve` to catch changes in a dockersized Angular 2 app? docker docker

How to configure `ng serve` to catch changes in a dockersized Angular 2 app?


You can use this npm package: https://www.npmjs.com/package/supervisorJust run the process using that supervisor process and specify which folders it should watch -w for changes and restart.

Hope that helps!


This may not be the answer you are after, but it is how we solve this problem in our dev workflow:

  1. Don't run ng serve in docker. Run it on your host. This way you avoid all the bugs of file sharing with docker. And you will hit them for sure, there are known issues with file changes on host propagating to Docker VM.

  2. Setup a reverse proxy in docker-compose that proxies requests to your backend and angular project. Most probably, you already are doing that.

    web:  image: nginx  ports:    - "80:80"  links:    - backend  extra_hosts:    - "frontend:192.168.99.1"

    Note that, instead of linking to frontend, we specify extra_hosts to point to our host IP address.

  3. Add the IP address to your lo0 interface on host, so that it is accessible from inside docker VM.

    sudo ifconfig lo0 inet 192.168.99.1/32 add

    This setting doesn't persist on a restart, so you will do it again.

The only thing to take care of here is to select a sane IP address to avoid conflicts with your local network and any VPN software you may be using.

Hope this helps.


I had a similar issue.Webpack was not watching for changes.See https://webpack.js.org/configuration/watch/

Inside webpack.common.js, you can add

watchOptions: {   poll: 1000, // a poll interval in milliseconds},