Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Docker bind mount volumes do not propagate changes events watched by angular `ng serve` execution

Following these steps:

  1. Define the Dockerfile:

    FROM node:alpine
    
    RUN yarn global add @angular/cli
    RUN yarn global add node-sass
    
    RUN mkdir /volumes
    
    WORKDIR /volumes
    
    EXPOSE 4200
    
    ENTRYPOINT ["ng"]
    
  2. Build an image from this Dockerfile:

    docker build -t my_angular_image .
    
  3. Use the image to create a new angular app :

    // Create the new app
    docker run --rm --mount type=bind,src=$PWD,dst=/volumes my_angular_image new my-app --directory app --style scss
    // Change ownership of the generated app
    sudo chown -R $USER:$USER .
    
  4. Based on the image, run a container bind mounting the app volume:

    docker run -p 4200:4200 --mount type=bind,src=$PWD/app,dst=/volumes my_angular_image serve --host 0.0.0.0
    

Results: The first compilation works as expected and the container serves the app. However, when changing the value (from host) of a file which has to be watched by ng serve in container, a new angular build is not triggered (and so, the served app is not updated).

Question: Does someone know why changing the value of a bind mount volume on host does not trigger the angular ng serve update in container (as it does when not using Docker)?

Environment:

  • OS : Ubuntu 16.04
  • Docker : 18.01.0-ce
like image 814
Hadrien TOMA Avatar asked Jan 20 '18 00:01

Hadrien TOMA


2 Answers

In order to make the example working, replace step 3 by the commands below:

// Create the new app
docker run --rm --mount type=bind,src=$PWD,dst=/volumes my_angular_image new my-app --directory app --style scss
// Change ownership of the generated app
sudo chown -R $USER:$USER .
// Configure angular-cli polling:
sed -i 's/\"styleExt\": \"scss\",/"styleExt": "scss", "poll": 1000,/g' $PWD/app/.angular-cli.json

Credits:

  • @PavelAgarkov's answer and its usefull links.
like image 146
Hadrien TOMA Avatar answered Nov 12 '22 05:11

Hadrien TOMA


there is a hidden option for angular-cli.json named poll by specifying which you can change the way how underlining webpack watches for file updates. Links:

  1. https://webpack.js.org/configuration/watch/#watchoptions-poll
  2. https://github.com/angular/angular-cli/pull/1814
  3. https://github.com/angular/angular-cli/wiki/angular-cli#angular-cli-config-schema
like image 31
Pavel Agarkov Avatar answered Nov 12 '22 06:11

Pavel Agarkov