1

I'm tying to run an Angular app via Docker for development. I want the app to live-reload in the Docker container every time changes are made in the host - just as it would if i ran 'ng serve' on the host machine.

I've managed to run the Angular app in a Docker container but i'm unable to access the app from the host. I am able to access other apps from other containers without any problem. It's the first time i'm using Angular with Docker and for some reason things aren't going as expected.

Here are my settings:

.env:

PROJECT_NAME=angular_proj
CMS_IMAGE=node:8.16.0-alpine

Dockerfile:

ARG CMS_IMAGE

FROM ${CMS_IMAGE} AS node

ARG PROJECT_NAME

RUN mkdir -p /srv/www/${PROJECT_NAME}/cms

WORKDIR /srv/www/${PROJECT_NAME}/cms

COPY /cms/package*.json ./

RUN npm install

COPY /cms ./

EXPOSE 4200/tcp

RUN npm start #executes 'ng serve --host 0.0.0.0'

docker-compose.yml:

version: '3.7'

services:

  cms:
    container_name: ${PROJECT_NAME}_cms
    build:
      context: .
      dockerfile: .docker/cms/Dockerfile
      args:
        CMS_IMAGE: ${CMS_IMAGE}
        PROJECT_NAME: ${PROJECT_NAME}
    ports:
      - 4200:4200
    volumes:
      - ./cms:/srv/www/${PROJECT_NAME}/cms

When i start the container everything runs as expected:

** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **

But when i try to open the app from the host i get ERR_CONNECTION_REFUSED. I searched for similar threads and tried most of their solutions, but without any success. What am I doing wrong?

I'm running MacOS Mojave with Docker 2.0.0.3 (31259).

Improve this question
3
  • 1
    Although not an expert on this but Check these Dockerizing an Angular app and this as well, try to add expose 49153 in Dockerfile and ports - '49153:49153' in docker-compose.yml, might be helpful ! Commented Apr 27, 2019 at 5:40
  • 1
    If you try the same from inside the container does it work? Commented Apr 27, 2019 at 7:05
  • Hi guys, thanks for the suggestions. After several hours of hammering my head i finally found why it didn't work. Answered my question with the solution. Commented Apr 27, 2019 at 16:47

1 Answer 1

Reset to default
3

With my initial settings, even though Angular CLI wasn't installed, the app was built and being served. But the Angular server caused the container creation/start to stall, thats why i was unable to access it.

In order to get everything working as expected, i installed Angular CLI in the container and used it to run the app:

Dockerfile:

ARG CMS_IMAGE

FROM ${CMS_IMAGE} AS node

ARG PROJECT_NAME

RUN mkdir -p /srv/www/${PROJECT_NAME}/cms

WORKDIR /srv/www/${PROJECT_NAME}/cms

COPY /cms/package*.json ./

RUN npm install

RUN npm install -g @angular/cli #added

COPY /cms ./

EXPOSE 4200/tcp

#RUN npm start #executes 'ng serve --host 0.0.0.0' #removed!
CMD ng serve --host 0.0.0.0 #added
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

do you have any idea why we need to do this? What exactly is the difference of npm running the ng serve vs running it on the command line in the container?
Hi @ELI7VH i work on two different environments with the same projects folder (MacOS and Windows). In order to keep everything working on both env, i use Docker. Also, i want to keep my computers clean of all the different software, library's, npm packages, etc, needed for all my projects. So, instead of having everything installed on the host machines, it's all kept inside the container.
no i get that. I also keep everything inside containers. But your command executes ng serve(inside your container) instead of npm run start (inside your container) What is the difference?
I'm not using 'npm run start' becasue it's defined in the package.json file as 'ng serve --disable-host-check --aot'. Since this is a project used by multiple devs (and everyone has a different dev env), I don't want to change the default settings. So, instead of using 'npm run start', I use my custom ng serve command. I understand that this might not be ideal, but it solves my issue. For example, in other projects, all devs are using Docker and we all share the same project settings.
got it. thank you for clarifying. I just wanted to know if there was something in the npm run start that could have been breaking it. Do you mean to say some of your team members are not embracing docker? how STRANGE :P
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.