Angular-cli: Issues with angular-cli and node docker official image.

[omata-metamax]

Hello,

I'm new with angular, so I'm using the node:6.9.4-alpine to get angular-cli installed to create a development docker image. So even when all is working I can't connect to the exposed port from outside the container. You can read the related history from here, where I posted the issue on the node official docker image and I figured out that the issue was not related with node image, but with angular-cli. Anyone has a clue about what is happening?

angular-cli version:

[email protected]

Another issue that I found is related with project creation. when I issue ng new project it fails when npm is installing modules, but if I issue ng new project --skip-npm and then I run npm install it works without errors.

Best regards.

[clydin]

As per the readme (https://github.com/angular/angular-cli/blob/master/README.md#usage), you can set the bound host and port via the --host and --port arguments.

Can you provide an error log regarding the npm failure?
And please provide the information contained within the template to allow proper troubleshooting of your issue.

[omata-metamax]

Thanks for the reply

As per the readme (https://github.com/angular/angular-cli/blob/master/README.md#usage), you can set the bound host and port via the --host and --port arguments.

The issue is not related with bounding port perse, but with binding any bounded port from angular to a docker container, please read the related link in my previous post, to get some background. The port by default works fine from inside the container when I issue curl http://localhost:8080, but not from outside it. I had test bounding ports 8080, 4200, and random with the same result.

You can reproduce the issue as follow:

docker pull node:6.9.5-alpine
docker run --name test -ti --rm -p 4200:4200 node:6.9.5-alpine sh

From inside docker container

npm install angular-cli -g
ng new test1 --skip-npm
cd test1
npm install
ng server

Then go to your browser and try http://localhost:4200 You will see an error with a connection refuse message. But you can go inside the container and try:

apk --update add curl ca-certificates
curl http://localhost:4200

You will state that the connection is made without issues from inside the docker container.

My docker environment information

Server Version: 1.13.0
Storage Driver: aufs
 Root Dir: /var/lib/docker/aufs
 Backing Filesystem: extfs
 Dirs: 123
 Dirperm1 Supported: true
Logging Driver: json-file
Cgroup Driver: cgroupfs
Plugins: 
 Volume: local
 Network: bridge host macvlan null overlay
Swarm: inactive
Runtimes: runc
Default Runtime: runc
Init Binary: docker-init
containerd version: 03e5862ec0d8d3b3f750e19fca3ee367e13c090e
runc version: 2f7393a47307a16f8cee44a37b262e8b81021e3e
init version: 949e6fa
Security Options:
 apparmor
Kernel Version: 4.4.0-62-generic
Operating System: Ubuntu 14.04.5 LTS
OSType: linux
Architecture: x86_64
CPUs: 4
Total Memory: 5.721 GiB

Regards.

UPDATE:

I tried with the --host option, binding to 0.0.0.0 and it did the trick thanks @clydin

As I said before I'm new to angular, so there is a place where I can configure this option and set it as default in my project?

About the other issue related with npm install failing at the project creation time I will post the log later.

Thanks again.

[delasteve]

Under defaults in your angular-cli.json you can do the following:

serve: {
 "port": 4200,
 "host": "0.0.0.0"
}

[filipesilva]

Closing as answered, thanks @clydin and @delasteve !

[imar26]

Hi All,

I tried the steps mentioned above by @omata-metamax and @delasteve

I am still not able to load my app in the browser. Please let me know if I am missing anything.

Below is my Dockerfile

FROM node:8.9.4

RUN mkdir /usr/src/app

WORKDIR /usr/src/app

COPY package*.json /usr/src/app/

RUN npm install

COPY . /usr/src/app

EXPOSE 4200

CMD [ "npm", "start" ]

Any help would be appreciated. Thanks!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}