'ng serve not working in Docker container

I have this Docker Compose configuration where I simply create a NodeJS container and install Angular CLI inside.

After a docker-compose up -d, I'm able to SSH inside the container with docker-compose run node bash. ng new works perfectly but ng serve does not seem to work. It's launched correctly, no error in the console. But, if I visit localhost (ad I mapped port 4200 to 80), nothing loads.

Am I missing something?

Solution 1:^[1]

try to run ng serve with host specified (which is set to 'localhost' by default):

ng serve -H 0.0.0.0

UPDATE Pay attention, currently (@angular/cli@7) the option is --host:

ng serve --host 0.0.0.0

Solution 2:^[2]

Using ng serve --host 0.0.0.0 has always worked for me.

The reason this is crucial is that without it, the angular process is only listening on the localhost interface inside the container - so even with the docker port mapping, connections from outside the container aren't being received.

** Angular Live Development Server is listening on localhost:3000

But if you add the parameter --host 0.0.0.0 then the angular process will listen on all interfaces, and the docker port mapping will allow connections from outside the container to reach it.

** Angular Live Development Server is listening on 0.0.0.0:3000

So, in summary:

you don't need the EXPOSE 4200 line in the Dockerfile
you do need the port mapping in the docker-compose.yml file
you do need the CMD line in the Dockerfile, and it should include the host parameter e.g. CMD ["ng","serve","--host", "0.0.0.0"]
you don't need to use docker run
you can use docker-compose up, which will pick up the port mappings from the docker-compose.yml file.

Solution 3:^[3]

In my Dockerfile I was trying the --disable-host-check option but the browser would wait indefinitely:

CMD ["ng","serve","--host", "0.0.0.0", "--disable-host-check"]

So I added a hostname: dev.musicng property in my docker-compose.yml file, with its entry in the /etc/hosts file: 127.0.1.1 dev.musicng and then I could see my application appear in the browser.

Solution 4:^[4]

what you are doing is just installing the angular, you need to have CMD ["npm start"] or CMD ["ng serve"] at the end of dockerfile this is the entrypoint for the container which docker executes when you start the container and only then the npm server will start.

ng serve -H 0.0.0.0 --port <yourportnumber> will make the ngserve to run on localhost:<yourportnumber>there after you can bind the container port number to your local port

Solution 5:^[5]

ng serve -H 0.0.0.0

with 1000 poll property in angular-cli.json (for file change detection)

"defaults": {
    "styleExt": "scss",
    "component": {},
    "poll": 1000
  }

Solution 6:^[6]

Project tree

.docker\node\Dockerfile

Install and configure Angular on node based container

FROM node:latest

RUN apt-get update && apt-get install -y vim

EXPOSE 4200

USER node

RUN mkdir /home/node/.npm-global
ENV PATH=/home/node/.npm-global/bin:$PATH
ENV NPM_CONFIG_PREFIX=/home/node/.npm-global

RUN npm install -g @angular/[email protected]

docker-compose.yml

Build the above Dockerfile
expose port 4200, run the command:

ng serve --host 0.0.0.0 --poll=2000

--host 0.0.0.0 listen to all container interfaces
--poll=2000 listen for changes in the folder

version: "2.1"

services:
  node:
    container_name: angularcontainer
    build: ./.docker/node/
    ports:
      - 4200:4200
    volumes:
      - "./:/var/www/html"
    working_dir: /var/www/html
    command: ng serve --host 0.0.0.0 --poll=2000

Start

Run in project root

docker compose up

And done!

Project

https://github.com/wictorChaves/docker-helper/tree/master/projetos/compose/angular

Referencias:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Vince Bowdren
Solution 3	Stephane
Solution 4	Vignajeth
Solution 5	Carlos Bastos
Solution 6	Wictor Chaves

'ng serve not working in Docker container

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]