0

I have a working Angular 5 app which I am struggling to make working with docker-compose.

Though similar kind of problem has been faced by many people but suggested solution does not work for me:

Access Angular app running inside Docker container

Cannot access nodejs app on browser at localhost:4200 (docker run -p 4200:4200 ....)

nodejs app doesn't connect to localhost when running within a docker container

ng serve not working in Docker container

not able to access angular2 app from docker container

Here is my docker-compose.yml

version: '3'
services:

  webui-ng:
     container_name: bcrm-webui-ng
     build: ./webui-angular   
     ports: 
      - 4200:4200

Below is the Docker file which is located under ./webui-angular. 

FROM node:9.6.1

# Create app directory
WORKDIR /usr/src/app

COPY package*.json ./

# Install app dependencies
RUN npm install

# Bundle app source
COPY . .

# Expose API port to the outside
EXPOSE 4200

# Launch application
#CMD ["npm","run ng serve"]
#CMD ["npm", "run", "ng", "serve", "--host", "0.0.0.0"]
#CMD ["npm", "run", "ng", "serve", "--host", "0.0.0.0", "--port", "4200"]
#ENTRYPOINT ["npm", "run", "ng", "serve", "--open", "--host", "0.0.0.0", "--port", "4200"]
CMD npm run ng serve --host 0.0.0.0

Please note that all the commands commented on last lines don't work. That is I always get "The connection was reset" error in Firefox when I open http://localhost:4200

Here is command line output

bcrm-webui-ng | 
bcrm-webui-ng | > Xyz@0.1.0 ng /usr/src/app
bcrm-webui-ng | > ng "serve" "0.0.0.0"
bcrm-webui-ng | 
bcrm-webui-ng | ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
bcrm-webui-ng | Date: 2018-09-24T14:03:38.509Z                                                           
bcrm-webui-ng | Hash: 4ac012def02ed7e0a08a
bcrm-webui-ng | Time: 19848ms
bcrm-webui-ng | chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
bcrm-webui-ng | chunk {main} main.bundle.js, main.bundle.js.map (main) 1.81 MB {vendor} [initial] [rendered]
bcrm-webui-ng | chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 221 kB {inline} [initial] [rendered]
bcrm-webui-ng | chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 28.2 kB {inline} [initial] [rendered]
bcrm-webui-ng | chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.25 MB [initial] [rendered]
bcrm-webui-ng | 
bcrm-webui-ng | webpack: Compiled successfully.
christoph
  • 628
  • 7
  • 18
Naveed Kamran
  • 453
  • 1
  • 4
  • 16

2 Answers2

1

Further investigating, I came to know that problem is not at docker end but instead following command does not work

npm run ng serve --host 0.0.0.0 --disable-host-check

But only running through works well.

ng serve --host 0.0.0.0 --disable-host-check
Naveed Kamran
  • 453
  • 1
  • 4
  • 16
0

Your docker is not getting the port address it got the first time. This happens when you run instead of start the docker each time. It just ties the 4200 port with the first container(which you will see if you run a docker ps -a).

Solution is to

  • remove your earlier container before you run docker compose
  • doing a docker inspect each time you do the docker compose
  • set a name to your container so your docker compose will warn you from creating duplicate containers. it can be done using --name in the docker run command.

you may choose one of these.

whitespace
  • 789
  • 6
  • 13
  • Thanks for the answer. I did sudo docker rm $(docker ps -a -q) and then ran again the sudo docker-compose up --build. Now the sudo docker ps gives following output which shows that the image is created again but still I am facing the same issue. CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES b0a265094568 source_webui-ng "/bin/sh -c 'npm run…" About a minute ago Up 58 seconds 0.0.0.0:4200->4200/tcp bcrm-webui-ng – Naveed Kamran Sep 24 '18 at 14:40
  • https://forums.docker.com/t/docker-running-host-but-not-accessible/44082/7 the same issue as yours, do a `docker inspect` on the container (using `id` or `name`) and see which ip it is currently running on. if you want to tie your docker with an ip permanently you need pipeworks https://github.com/jpetazzo/pipework. But you need to name your container before doing that because the pipeworks command needs a name. – whitespace Sep 24 '18 at 15:09