Angular-cli: Browser is not kicked off, changes are not detected

[staskolukasz]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

Windows

Angular CLI

@angular/cli: 1.0.0                      
node: 6.10.1                             
os: win32 x64                            
@angular/common: 4.0.1                   
@angular/compiler: 4.0.1                 
@angular/core: 4.0.1                     
@angular/forms: 4.0.1                    
@angular/http: 4.0.1                     
@angular/platform-browser: 4.0.1         
@angular/platform-browser-dynamic: 4.0.1 
@angular/router: 4.0.1                   
@angular/cli: 1.0.0                      
@angular/compiler-cli: 4.0.1             

Node.js

v6.10.1

NPM

3.10.10

Repro steps.

ng new TestApp
cd TestApp
ng serve

The log given by the failure.

** NG Live Development Server is running on http://localhost:4200 **
Hash: 0e6d5fe3776172acc1f2
Time: 9378ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.69 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.37 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.

Desired functionality.

1/ Web browser is not kicked off by default. Instead I need to use:

ng serve -open

2/ Changes are not detected at all.
3/ Project is not beeing recompiled.
4/ Browser is not refreshed when changes are applied.

Mention any other details that might be useful.

[RPGillespie6]

Same thing is happening to me.

@angular/cli: 1.0.0-rc.4
node: 6.10.1
os: linux x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 4.0.1

Not only are the files not being watched, even refreshing the page does not pick up changes. The only way to pick up changes is to kill ng serve and then relaunch.

[RPGillespie6]

@staskolukasz In my opinion the real issues here are 2-4.

1 just looks like the default value was switched:

  --open (Boolean) (Default: false) Opens the url in default browser.
    aliases: -o, -open

I have a different PC running Ubuntu 16.04 and it's working on that one. The only difference is the node version:

@angular/cli: 1.0.0-rc.4
node: 7.8.0
os: linux x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 4.0.1

[ctrl-brk]

No, please don't start the browser. I know better when and which one I need.

[RPGillespie6]

It appears node version has nothing to do with it. I updated my Node.js to version 7.8 on my other PC and it does not seem to have fixed anything. Seems like a websockets issue. On the PC this works on, the websockets entry in chrome developer tools shows a blue bar on the timing column. However, on the PC it is not working on, there is no such blue bar, just blank white.

[RPGillespie6]

Completely removing angular-cli and reinstalling it "fixed" it for me. One problem was that npm uninstall -g @angular/cli had no effect on my system (Ubuntu 16.10). I had to manually do:

$ sudo rm -rf /usr/local/lib/node_modules/@angular
$ sudo rm /usr/local/bin/ng

Once I did that, angular-cli was completely purged from my system and I was able to reinstall 1.0.0.

[staskolukasz]

@RPGillespie6 Thank you for you commitment.

I was trying to do the same on my workstation on Windows 10/Windows 7, i.e., after uninstallation of the CLI I have deleted manually following directories:

AppData\Roaming\npm\@angular
AppData\Roaming\npm-cache\@angular

Then I reinstalled the CLI, but I was not successfull. The problem still occurs.

[IevhenIkonnykov]

Hello,
After I switched from Angular 2.4.3 to Angular 4 I encountered a similar problem. Somehow changes in .css files or .html files are picked up automatically and everything is fine. But when I make changes in .ts files the webpack recompiles changes (too fast in comparison when I used Angular 2.4.3) and a web browser is refreshed, but nothing changes as if no changes were applied before. As @RPGillespie6 said only relaunching of ng serve helps.
If anyone has any solution please share it.

Thanks.

[leozero]

Same error with this configuration :
@angular/cli: 1.0.0 node: 7.8.0 os: win32 x64 @angular/animations: 4.0.2 @angular/common: 4.0.2 @angular/compiler: 4.0.2 @angular/core: 4.0.2 @angular/forms: 4.0.2 @angular/http: 4.0.2 @angular/material: 2.0.0-beta.3 @angular/platform-browser: 4.0.2 @angular/platform-browser-dynamic: 4.0.2 @angular/router: 4.0.2 @angular/cli: 1.0.0 @angular/compiler-cli: 4.0.2

I found a "solution", set the poll to a value up to zero : ng serve --poll 2 for example, but it takes ~21 seconds to compile instead of ~2-3 seconds, but it's a better solution than a new ng serve at each modification.

[mesopotamia]

I feel like this is a very critical issue and should be a blocker as it seriously hinders development.

[staskolukasz]

Hello,
Thanks @leozero for your advice. Unfortunately running up the server with the following command doesn't help on my workstation.

ng serve --poll 2

Can anybody describe in more details, what is this problem about?

[IevhenIkonnykov]

Hello. In my case the problem was with an IDE. I use WebStorm and I had to change settings. File -> Settings -> Appearance & Behavior -> System Settings and uncheck 'Use "safewrite" (save changes to a temporary file first)'. After that on Ctrl+S all changes are picked up. Perhaps it will be useful for someone.

[IevhenIkonnykov]

Just to add. A similar problem is discussed here. Perhaps someone can find some answers there.

[mesopotamia]

@IevhenIkonnykov This did fix it! who would've thought it was a Webstorm/Intellij issue! Thank you. :tada: :beer:

[leozero]

@IevhenIkonnykov I cannot reproduce this issue with the latest version of Webstorm maybe it's fixed (or I'm lucky for now). Thanks for your advise, I'll try your solution if this trouble continue and keep you informed if it works ;-)

[filipesilva]

We did have some rebuild issues with css/html in the RC versions, but they were fixed by 1.0.0 final. As far as I can tell most 'changes not detected' errors are due to IDE 'safe write' features in WebStorm and Vim.

@IevhenIkonnykov's solution works and there's more information about it in https://github.com/angular/angular-cli/issues/5117.

https://github.com/angular/angular-cli/issues/1610 describes some separate issues that also have these symptoms.

[kokodda]

i have same problem with visual studio no changes detected

[m-vdv]

Some problem, fresh Angular CLI install. ng serve doesn't livereload the browser on change.
ng build --watch doesn't work either.
Using Sublime Text 3.

@angular/cli: 1.0.3
node: 7.8.0
os: darwin x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

UPDATE: Found the problem! The path to my app directory had spaces and () in it. This somehow broke the live reload functionality. Just moved my project to a new path without spaces or special characters and it's working fine now.

This should be fixed or documented somewhere.

[staskolukasz]

Hello,
As @m-vdv mentioned, I got also in my path to app directory spaces.
However, just for you information, I have updated my angular CLI and the problem is gone.

```
@angular/cli: 1.2.4
node: 6.11.1
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.4
@angular/compiler-cli: 4.3.1

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

<sub>_This action has been performed automatically by a bot._</sub>