webpack live reload is not working.

[burdzand]

I have installed the webpack but the live reload is not working , it is building the modules and caching it.

Linux 4.4.0-31-generic
node v6.2.2
npm v3.10.5

angular-cli: 1.0.0-beta.11-webpack
node: 6.2.2
os: linux x64

[TheLarkInn]

Are you using the ng serve command or ng build --watch.

Both should work but I ask because we really need more information to accurately tackle this.

[burdzand]

I am using ng serve

[burdzand]

10% building modules 1/1 modules 0 active
*
*
NG Live Development Server is running on http://localhost:4200.
*
4318ms building modules
38ms sealing
0ms optimizing
0ms basic module optimization
16ms module optimization
1ms advanced module optimization
15ms basic chunk optimization
1ms chunk optimization
0ms advanced chunk optimization
0ms module and chunk tree optimization
58ms module reviving
5ms module order optimization
4ms module id optimization
3ms chunk reviving
0ms chunk order optimization
14ms chunk id optimization
26ms hashing
1ms module assets processing
71ms chunk assets processing
2ms additional chunk assets processing
1ms recording
0ms additional asset processing
127ms chunk asset optimization
864ms asset optimization
25ms emitting
Hash: 3eaa2255197a9b5cb5fd
Version: webpack 2.1.0-beta.18
Time: 5607ms
Asset Size Chunks Chunk Names
main.bundle.js 2.18 MB 0, 2 [emitted] main
polyfills.bundle.js 227 kB 1, 2 [emitted] polyfills
inline.js 4.96 kB 2 [emitted] inline
main.map 2.59 MB 0, 2 [emitted] main
polyfills.map 294 kB 1, 2 [emitted] polyfills
inline.map 5.13 kB 2 [emitted] inline
index.html 476 bytes [emitted]
.npmignore 0 bytes [emitted]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.4 kB 0
webpack: bundle is now VALID.

[filipesilva]

I'm seeing the live reload working myself. Can you give very exact repro steps so we can see if there's something missing?

[281330]

I am having the same issue after I cloned a project from my repo.

On my regular machine, I see a lot of something like "69% building modules 1054/1062 modules 8 active ..", etc.

But on my other machine, I only see this -

 ng serve
 10% building modules 1/1 modules 0 active           
*
*
 NG Live Development Server is running on http://localhost:4200.
*
5134ms building modules                                                                   
13ms sealing
0ms optimizing 
0ms basic module optimization 
43ms module optimization
1ms advanced module optimization 
9ms basic chunk optimization        
0ms chunk optimization 
1ms advanced chunk optimization 
0ms module and chunk tree optimization 
89ms module reviving
2ms module order optimization 
3ms module id optimization 
4ms chunk reviving 
0ms chunk order optimization 
19ms chunk id optimization
19ms hashing
0ms module assets processing 
56ms chunk assets processing
3ms additional chunk assets processing 
0ms recording 
0ms additional asset processing 
131ms chunk asset optimization
1059ms asset optimization
22ms emitting
Hash: 101774096aac67c140a7
Version: webpack 2.1.0-beta.18
Time: 6621ms
              Asset       Size  Chunks             Chunk Names
     main.bundle.js    3.75 MB    0, 2  [emitted]  main
polyfills.bundle.js     232 kB    1, 2  [emitted]  polyfills
          inline.js    4.96 kB       2  [emitted]  inline
           main.map    4.42 MB    0, 2  [emitted]  main
      polyfills.map     295 kB    1, 2  [emitted]  polyfills
         inline.map    5.13 kB       2  [emitted]  inline
         index.html  877 bytes          [emitted]  

Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.83 kB       0       
webpack: bundle is now VALID.

Now, when I make any changes to my code, it doesn't reload.

[filipesilva]

If you can provide us with a repo where this behaviour happens, we can investigate. Otherwise I'm not really able to reproduce this behaviour.

[giovapanasiti]

I'm having same issue. My ng version is: angular-cli: 1.0.0-beta.11-webpack.2

ng serve works without live reload and ng build --watch only build the app and then quit without even serving the app on localhost

[osechet]

I'm having the issue for directories starting with '+'. ng serve and ng build -w works normally: they build the application and wait for changes. If I modify a file in a 'normal' directory (i.e. app.component.ts), the change is detected and ng rebuilds. If I modify a file in a directory whose name starts with '+', nothing happens.
However it's working when I use gedit: when gedit saves a file, it creates a backup that triggers the reload. Reloads also works if I manually create a new file.

[osechet]

I renamed my directories to remove the '+' and in fact the problem happens with any subdirectory of app. If I modify anything directly inside src (i.e. index.html, main.ts, ...) reload works. If I modify something in a subdirectory of src (i.e. src/app/app.component.*, src/app/app.module.ts, src/assets, src/environments/environment.ts, ...) reload works as well. But if I modify something in a subdirectory of app (i.e. src/app/foo/foo.component.ts), there is no reload.

I'm on Ubuntu 14.04 and I can reproduce this with any repository. For example:

ng new project
cd project
ng g c foo
ng serve

Then open a browser on the application. Edit app.component.html as follow:

<h1>
  {{title}}
</h1>
<app-foo></app-foo>

Save: ng reloads the app.

Edit foo/foo.component.html as follow:

<p>
  foo works! ng reloads?
</p>

Save: ng does not reload.

@filipesilva Do you confirm you cannot reproduce following these steps?

[FoodBuster]

I had the same issue, but managed to fix it. The problem might have to do with folder naming. At first, my main project folder (where I would navigate to before doing "ng serve") was named something like "XX (Front)". I renamed it to "XX_Front" (and flattened the folder structure) and live reload started working.

[filipesilva]

@osechet I followed your instructions and had a life reload be triggered when changing foo/foo.component.html.

I'm using beta.14 and VSCode as an editor, if that helps. Do you also get this in beta.14?

[osechet]

I'm using vscode as well but I tested several editors to see if there was a difference. I'm not yet using beta.14. I will try during the week.

[AntoineViau]

I confirm the @FoodBuster naming problem. My project was in directory named like :
c:\SomeDir\Some with space and (parenthesis)\myapp
Reload was not triggered.
Moving to :
c:\AnotherDirectory
And reload works.

[dessalines]

I'm on linux, the naming doesn't fix mine. My files are located at ~/git/my_codebase/ui/..., so no spaces or parentheses. Live reload not working. Changing to files like app.component.ts also don't trigger a reload.

[dessalines]

I fixed this by removing running rm -rf node_modules , and reinstalling angular-cli both globally and locally.

[osechet]

I just updated my project from 1.0.0-beta.11-webpack.8 to 1.0.0-beta.15. Everything has been cleaned (node_modules, node cache...). Problem is still here.

I'm on Ubuntu 14.04.

[filipesilva]

So as far as I can tell, there's two situations that can cause this issue:

• a problem with folder paths having spaces, as described by @FoodBuster on webpack live reload is not working. #1610 (comment)
• inotify reaching watcher max on linux, as described by and solved by @paillave on ng serve not detecting file changes #2389 (comment)

We'll try to find a more permanent solution to these problems.

[sergiyvoytovych]

ng serve --poll=1000 works for me fine
Thanks

[PapyElGringo]

--poll=1000 saved me thanks !!

[Crepu]

This still happens, I've just installed angular cli and it doesn't work properly.

I'm just following the angular guide.

The error is the same.

When you run ng serve -o and make some basic editing it won't reload automatically.

Solution by @thesunnypro and @alexsaraiva work for me, but I'm still wondering why this happens.

ng -v

Angular CLI: 1.6.7
Node: 6.10.1
OS: linux x64
Angular: 5.2.3

@angular/cli: 1.6.7
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

uname -rms

Linux 4.14.16-200.fc26.x86_64 x86_64

[YaronMiro]

Had the same problem when running the ng serve command (updating files had no effect what so ever)
I solved the issue by re-installing nodes_modules, It also works with the --poll option without needing to re-install the nodes_modules (@alexsaraiva solution), So either one worked for me.

Steps for solution:

rm -rf nodes_modules/
npm update
npm install

if still not working after re-installing the node_modules then try ng serve --poll=1000 or ng serve --poll=2000

This is my setup:

Angular CLI: 1.7.0
Node: 8.9.4
OS: linux x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.5.3
webpack: 3.11.0

[GeraldScott]

I am using Centos, and increasing the amount of inotify watchers worked for me.

It is also applicable to Ubuntu users.

[rightisleft]

--poll=1000 causes my cpu to spike insanely high when running docker / archlinux

[rightisleft]

I dont understand why this ticket was closed

#2748 (comment)

[rightisleft]

This is not an issue with low inotify watchers, the alpine node base image has the following:

/app # sysctl -a | grep inotify
fs.inotify.max_queued_events = 16384
fs.inotify.max_user_instances = 128
fs.inotify.max_user_watches = 524288

[ghost]

Even if this issue is related to low inotify watchers, it is not an OS issue but an Angular issue.
We should not to hack our systems to run an Angular project!

[rightisleft]

It would be great if the angular team and @filipesilva put together an official docker hub container with the angular client working in it. It would allow us to narrow the possibility space for whats failing across these numerous build approaches.

[virgil-av]

This is still a problem, same behaviour on a Fedora / Windows 10 machine

[kaushik-kumar-roy]

i used sudo ng serve and it was working.

[chapultepec]

@KAUSHIK-ROY that's right!
sudo ng serve is the solution
The same issue: #11224

[doanthai]

ng serve --poll=1000 works for me fine
Thanks

It's work with me. Thanks.

[samuelzapote]

Solution offered by @cabaleirog worked for me. (Ubuntu)

After trying multiple options, I solved the issue by reinstalling nodes_modules. Hope it helps.

Steps

• rm -rf nodes_modules/
• npm update
• npm install

My app.component changes were triggering the update. But all the other components I made to place within the app would not trigger any updates to the view of my app. This solution made any changes I made update the view, and it works accordingly now.

[narenkram]

ng serve --poll=1000

This solved the issue on my Angular 7 project in Ubuntu. Thank you @sergiyvoytovych

[mgechev]

Looks like there's already a solution for the issue. It's strange that I cannot reproduce it at all though. Please try updating to the latest CLI version. In case you hit this problem again, please share a repository with a minimal demo so we can reproduce the bug and open a new issue.

[karthicktkm]

You just run following command it will work when you're did any changes. app will auto-deploy.

ng serve -o

[scorbin]

@Narain96 - thanks, your solution works for me

[emgillis]

I have been having the same issue. Only solution that works is the --poll=1000 option.

The issue itself definitely appears to be Angular version dependent. I have a project folder with a local Angular version of 5.2.0 and the recompile and reload on saved changes works no problem. My global Angular 7 version does not allow for this. The --poll=1000, however, does spike my CPU (as @rightisleft mentions). This is also true for a brand new ng new foobarappthat I created. Nothing else in it, but the recompile & reload doesn't happen on saved changes without the --poll=1000

My Angular version info:

Angular CLI: 7.3.9
Node: 10.15.2
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.2
typescript                        3.2.4
webpack                           4.29.0

[cedx]

More or less the same issue here: all HTML and CSS files are properly watched, but not the TypeScript files. Whatever the solution applied (removing/reinstalling the node_modules folder, using the --poll parameter, changing the inotify watchers on Linux), nothing has worked. It's probably related to the layout of my project, or the contents of the tsconfig.json files, because ng serve works as expected on a minimal app generated with ng new.

Tested with Node.js 12.2.0 and 12.3.0 on Windows 10 and Ubuntu 19.04: in my case, the issue is clearly not OS-dependant.

Angular CLI: 7.3.9
Node: 12.3.0
OS: win32 x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.5.2
typescript                        3.2.4
webpack                           4.29.0

[angular-automatic-lock-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.}