angulardocker-composerebuild

Docker compose: Angular doesn't rebuild project when files are changed via volume mount

I have three container, a backend server, a frontend server and a database. Those container are build, run and managed via docker compose. According to the docs I should be able to mount a volume to reflect changes done to the files directly into the running containers, without needing to rebuild the images.

But when I try to change e.g. the HTML of my website in VS Code, the frontent server doesn't show the changes and still has the old files.

I've tryed to google for an explanation, why this isn't working, but had no luck so far. Why is it not working, while the docs say, that it should?

My docker-compose.yml file looks as follows (reduced to just the frontend container):

volumes:
  node_modules:
services:
  ...
  web:
    build: ./frontend/
    ports:
      - "4200:4200"
    volumes:
      - ./frontend/directory:/frontend
      - node_modules:/frontend/node_modules
    depends_on:
      - backend

My code (an angular project) is located under frontend/directory and is mapped correctly to the container.

EDIT: It appears, that the files inside the container are indeed the updated files. But for some reason, Angular doesn't rebuild the project, when the file is changed.

Thanks for your help.

Solution

  • Angular's development server watches for file changes within its project directory and triggers rebuilds. However, file system events might not be propagated correctly from the host to the container when using certain file systems or Docker configurations. To resolve this, you can try using the --poll flag when starting the Angular development server.

    Modify your package.json by adding the --poll 2000 option.

    Depending on your workflow/needs, add the --poll ms switch where ms is the polling interval.

    "start": "ng serve --poll 2000",

    "watch": "ng build --watch --poll 2000 --configuration development",