5

Running a freshly created angular app in a docker container in windows does not hot reload the app on changes. I tried this Docker container doesn't reload Angular app.

but keeps failing, if I create the image then run the container I get:

web_1 | npm ERR! enoent ENOENT: no such file or directory, open '/usr/src/app/package.json'

I also tried following this article (Works on Mac but not Windows):
Dockerizing an Angular App

I tried adding --poll to my angular.json:

"docker": {
    "poll": 2000
},
  • This is my DockerFile 
FROM node:8.11.2

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install -g @angular/cli@6.1.5

# add app
COPY . /usr/src/app

EXPOSE 4200 49153
# start app
CMD ng serve --port 4200 --host 0.0.0.0 --poll 1

That's how I run it:
docker build -t something-clever .

For the container:
docker run -it -v C:/Users/test-docker -v /usr/src/app/node_module -p 4200:4200 -p 49153:49153 --rm something-clever bash -c "npm start"

Any help is appreciated. Thank you.

Nadhir Falta
  • 5,047
  • 2
  • 21
  • 43
  • 2
    I had the same issue on my windows desktop and docker. Try to add `--poll` to your `ng serve` command: `ng serve --host 0.0.0.0 --port 4256 --configuration hmr --source-map=false --hmr-warning=false --poll 1`. ` --poll Enable and define the file watching poll time period in milliseconds.` – Dmitry Bykadorov Nov 10 '18 at 08:15

3 Answers3

4

There are a few things going wrong in your configuration, first of all I assume you want to bind C:/Users/test-docker to /usr/src/app/node_module?

If this is not the case you will need to bind the local project directory to /usr/src/app/node_module. You can do this by using the syntax -v <source_dir>:<target_dir> as described in the docs.

So this would result in docker run -it -v C:/Users/test-docker:/usr/src/app/node_module -p 4200:4200 -p 49153:49153 --rm something-clever bash -c "npm start"

Second of all, you are currently copying the files when you build the image, not when you run it. Meaning that the files currently present in the docker image will always remain the same unless you restart it. This step will become obsolete when you bind your project directory directly into the container.

By doing this the files will be updated on both your host and inside the docker container. So you can just remove the copy lines from your docker file after you have fixed the volume mounts.

I hope this helps you

Sven Hakvoort
  • 3,543
  • 2
  • 17
  • 34
1

You misspelled node_modules. Your docker run command has node_module.

Run Docker with the below command:
docker run -it -v C:\Users\test-docker:/usr/src/app/node_modules -p 4200:4200 -p 49153:49153 --rm something-clever bash -c "npm start"

Windows User may require additional quotes in the parameters:
docker run -it -v "C:\Users\test-docker:/usr/src/app/node_modules" -p 4200:4200 -p 49153:49153 --rm something-clever bash -c "npm start"

Saddam Pojee
  • 1,518
  • 9
  • 14
0

Sven gave the exact solution. Passing --poll 2000 and --disable-host-check helped in solving all scenarios. Just adding on to a formalize it, I made a Docker-Angular Hot-Reload template for future projects.

Shikhar Vaish
  • 86
  • 4