"Invalid Host Header" persists with cli > 1.0.0 with Docker container on Windows 7

[johanchouquet]

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 7.9.0
os: linux x64
@angular/animations: 4.3.0
@angular/common: 4.3.0
@angular/compiler: 4.3.0
@angular/core: 4.3.0
@angular/forms: 4.3.0
@angular/http: 4.3.0
@angular/platform-browser: 4.3.0
@angular/platform-browser-dynamic: 4.3.0
@angular/router: 4.3.0
@angular/material: 2.0.0-beta.8
@angular/cli: 1.0.0
@angular/compiler-cli: 4.3.0
@angular/language-service: 4.3.0
@angular/cdk: 2.0.0-beta.8

Repro steps.

The steps are not simple, as it is also linked to the used environment.

Until Angular-Cli 1.0.0, it was possible to launch ng serve -H 0.0.0.0 , which worked fine for me in a container development environment. The thing is that I'm on Windows 7, using Docker Toolbox to have my containers running under Linux.
From there, Angular-Cli > v1.0.0 uses an updated version of Webpack (> 2.4.3 if I remember well). And with that, the -H 0.0.0.0 doesn't work anymore.
I obtained Invalid Host Header.

I've seen a lot of problems, and some solutions around that. But none of these are actually working for me.
I tried with --disable-host-check option, but then, it was live-reload that wasn't working. I had plenty of : [WDS] Disconnected! GET http://localhost:4200/sockjs-node/info?t=1480728685812 net::ERR_CONNECTION_REFUSED messages.
See #3361 for more details.

I also tried some tests with --live-reload-client set to the IP address (with protocol://IP:port), in all different manners (with and without --disable-host-check).
I even tried to hack the Cli by setting a new Docker Image with an new serve.js file in node_modules/@angular/cli/tasks to set the live-reload host.

The log given by the failure.

But still, same result : I obtained Invalid Request Header.

Desired functionality.

What would like to see implemented?

Developers should still be able to develop the way they used to, by updating their tools for development. Obviously, this is not just related Angular-Cli, but is also related with Webpack & live-reload, but I believe that I am not the only one who was impacted by this change.

I'd like to be able to use the same workflow as I was used to, except for some modifications. But for now, it just doesn't work. I'm stuck with v1.0.0 of Angular-cli.

What is the usecase?

Allow developers to develop under Windows 7/10 + with Docker containers seamlessly, setting the correct options in the Cli or Webpack.

Mention any other details that might be useful.

I saw that a higher version of Webpack exposes an array of AllowedHosts. Maybe this could be a true solution to this problem, allowing developers to set wildcards of allowed hosts (ex: 192.168..). But still, it would have to be developed in the Cli (if not already done).

Sorry if you consider that it's not a real bug, but it's a real problem for me and others as I've read quite some issues about that.

[filipesilva]

I'd like to have everything working properly under docker, and I remember there were some people doing just that, but it's both hard to repro and hard to test. A lot of it is super specific to how you setup your environment as well.

I can have a look if you can provide some repro steps I can follow (Win10 myself). I'm pretty sure there's a combo of options that will work pretty well.

[filipesilva]

Ideally we could get a wiki story out of this to help other docker users as well.

[johanchouquet]

Yes, sure @filipesilva . Good idea for the wiki.
Basically I don't do anything not standard with Docker, as I'm on Win 7 and I have the 'downgraded' version of Docker in docker-toolbox.

My 1st Docker image is:

• I start using the node version 7.9.0 (but it could be another one, for getting npm 5 for example)
• I run apt-get update + install git vim on it.
• I create the folder /usr/src/app

My 2nd Docker image is :

• from MyImage1, i set the working directory to /usr/src/app
• I install @angular/cli@latest (hoping that my problem can be solved) with npm
• I install with npm node-sass and forces it to rebuild node-sass so that it can be compiled for linux again.

The 3rd image is for the angular application itself.

• From MyImage2, I set the working directory to usr/src/app again
• I make the COPY . . (the node_modules is also in .dockerignore file)
• I run npm install

As I'm on Windows and the target is a Linux container, I used to have my node_module included in the COPY of files which took a while every time I was working on my images, so what i did was :

• create a project folder at the root of the app
• leave the .angular-cli.json, package.json and .dockerignore, .editorconfig, .gitignore files at the root
• put everything else in the project directory
• of course, I had to configure the paths on the .angular-cli.json accordingly.

This way, the COPY of the node_modules folder could be avoided. And I only need to rebuild the 3rd Docker image when my dependencies change.

I'm 100% sure this can be optimized. But this was just an 'OK starting point'.

Then, I use docker-compose.

In my docker-compose.yml file:

• I add configuration of the Volumes, like this: /c/Users/jct/myApp/project:/usr/src/app/project:rw (the project folder is important)
• I add configuration for Ports : "4200:4200" + "49153:49153".
• I add the command to be run by default: what works with @angular/cli v1.0.0 is the following:
  ng serve --H 0.0.0.0 --environment=docker (I have a environment.docker.ts file in the environments folder)

Then, I use Kitematic

Kitematic runs a VM through Virtual Box (because I'm on Win 7, not 10). Then when the default VM is launched, I run in a Docker terminal : docker compose up and my docker-compose file will be parsed and everything will be launched.

Note that by default, the default VM has its IP set to 192.168.99.100.

That's my configuration. Nothing fancy here, just a particular setup for my project due to the change Windows -> Linux (the rebuild node-sass was mandatory because of that change of architecture). Except from that, I pretty much use the default configurations.

[filipesilva]

I haven't had a chance to look into this setup, but #7222 is related and seems to have live reload working overall.

[johanchouquet]

Back from holidays, I read the other problem. In fact, I have the same issue as #7222, but for me, as you saw, I'm not behind a proxy like nginx. I just use :

• Node 7.9 + Git + Vim
• Angular-cli (I rebuild node-sass)
• my Angular application

I'll be working on #7222 and my issue with latest releases from angular/cli to see i can solve this problem.

[johanchouquet]

Hi everyone,

Quick update: I used to have this problem, until today: I just upgraded to angular 5.0.0-rc.0 + angular/cli v1.5.0-beta.2, and this HUGE problem was solved :)! Really ! This is awesome as I now can get develop the app way faster + get to build great features with service wokers and i18n.

Really great work for the teams! Thanks a lot.

[filipesilva]

I'm kinda glad this was fixed for you but I actually have no idea what changed fixed it 😅