Following these steps:
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"]
Build an image from this Dockerfile:
docker build -t my_angular_image .
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 .
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:
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:
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With