Angular-cli: Webpack dev server running, but site not shown

Created on 8 Aug 2016  路  9Comments  路  Source: angular/angular-cli

  1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
OS X Yosemite Version 10.10.5
Docker 1.12.0
Boot2Docker 1.12.0
VirtualBox 5.0.26
  1. Versions. Please run ng --version. If there's nothing outputted, please run
    in a Terminal: node --version and paste the result here:
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.11-webpack
node: 5.12.0
os: linux x64
  1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
    do on your code? etc.

    • Create a new app with ng new -sn foo

    • Switch into folder cd foo

    • According to Issue#1566 I removed ^ from "angular-cli": "1.0.0-beta.11-webpack" in package.son.

    • Install all dependencies locally npm install

    • Start serving app with ng serve

    • Opening browser (Chrome) on http://localhost:4200 (or better to say on http://192.186.99.100:4200 as I'm running docker) -> Error: This site can't be reached

  2. The log given by the failure. Normally this include a stack trace and some
    more information.

Output from ng serve

foo_1  | Could not start watchman; falling back to NodeWatcher for file system events.
foo_1  | Visit http://ember-cli.com/user-guide/#watchman for more info.
 10% building modules 1/1 modules 0 active           
foo_1  | *
foo_1  | *
foo_1  |  NG Live Development Server is running on http://localhost:4200.
foo_1  | *
7127ms building modules                                                                  
15ms sealing
0ms optimizing 
0ms basic module optimization 
37ms module optimization
1ms advanced module optimization 
23ms basic chunk optimization       
0ms chunk optimization 
0ms advanced chunk optimization 
1ms module and chunk tree optimization 
63ms module reviving
8ms module order optimization 
3ms module id optimization 
7ms chunk reviving 
2ms chunk order optimization 
11ms chunk id optimization
25ms hashing
2ms module assets processing 
109ms chunk assets processing
2ms additional chunk assets processing 
1ms recording 
0ms additional asset processing 
111ms chunk asset optimization
950ms asset optimization
21ms emitting
foo_1  | Hash: c442595487d1beca2ba8
foo_1  | Version: webpack 2.1.0-beta.18
foo_1  | Time: 8536ms
foo_1  |               Asset       Size  Chunks             Chunk Names
foo_1  |      main.bundle.js    2.18 MB    0, 2  [emitted]  main
foo_1  | polyfills.bundle.js     226 kB    1, 2  [emitted]  polyfills
foo_1  |           inline.js    4.96 kB       2  [emitted]  inline
foo_1  |            main.map    2.57 MB    0, 2  [emitted]  main
foo_1  |       polyfills.map     281 kB    1, 2  [emitted]  polyfills
foo_1  |          inline.map    5.13 kB       2  [emitted]  inline
foo_1  |          index.html  476 bytes          [emitted]  
foo_1  |          .npmignore    0 bytes          [emitted]  
foo_1  | Child html-webpack-plugin for "index.html":
foo_1  |          Asset    Size  Chunks       Chunk Names
foo_1  |     index.html  2.4 kB       0       
foo_1  | webpack: bundle is now VALID.

After that nothing more happens on command line.

  1. Mention any other details that might be useful.

I executed the same steps for building and running angular-cli Version 1.0.0-beta.10 inside a docker container on my machine and the broccoli based development server was serving the expected page.

Most helpful comment

If you're running inside a docker container, you'll need to change ng serve to ng serve --host 0.0.0.0 so it can be exposed.

All 9 comments

If you're running inside a docker container, you'll need to change ng serve to ng serve --host 0.0.0.0 so it can be exposed.

@cydlin there is no difference whether I use --host 0.0.0.0 or not.

I couldn't find much of any documentation. So I'm not sure where the output shown by webpack is generated. After running ng serve there is no dist folder.

@suchja ng serve creates a bundle and serves it virtually in memory. (So that builds are ultra fast). I don't know much about docker integration specifically.

CC @d3viant0ne any thoughts on this (in relation to the docker stuff).

@suchja Are you exposing the port? The docker command should contain -p 127.0.0.1:4200:4200. That should allow access with http://localhost:4200 on the host.

@suchja - To make this easy. Can we get the pertinent portions of you for dockerfile / docker-compose.yml

@suchja On second though, not necessary. My first piece of advice, get off boot2docker and onto Version 1.12.0-beta21 (build: 11019)

The list of problems related to vbox file system is like some sort of Greek tragedy. It may not solve your immediate issue but it will level the playing field a bit.

You can also find me in the Webpack gitter under the same name if you want to work on this without the messaging delay.

@d3viant0ne docker for mac did the trick. THANKS!!! 馃憦

I'm still curious about what went wrong on the boot2docker installation, but I don't want to waste your and my time anymore.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

donaldallen picture donaldallen  路  3Comments

hareeshav picture hareeshav  路  3Comments

jmurphzyo picture jmurphzyo  路  3Comments

purushottamjha picture purushottamjha  路  3Comments

rajjejosefsson picture rajjejosefsson  路  3Comments