Angular 5 application not accessbile over network or outside the docker

Question

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 | > [email protected] 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.

did you face this problem the very first time you successfully executed docker compose? or is it a subsequent issue? — whitespace
– whitespace, Commented Sep 24, 2018 at 14:20

Naveed Kamran · Accepted Answer · 2018-09-25 09:30:54Z

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

whitespace · Accepted Answer · 2018-09-24 14:28:07Z

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.

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
forums.docker.com/t/docker-running-host-but-not-accessible/… 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 github.com/jpetazzo/pipework. But you need to name your container before doing that because the pipeworks command needs a name.

Collectives™ on Stack Overflow

Angular 5 application not accessbile over network or outside the docker

2 Answers 2

Comments

2 Comments

Hot Network Questions