webpack live reload is not working.

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

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.

I am using ng serve

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.

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

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.

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.

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

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.

@filipesilva

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?

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.

@osechet

@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?

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.

@filipesilva

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.

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

i used sudo ng serve and it was working.

@KAUSHIK-ROY

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

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

It's work with me. Thanks.

@cabaleirog

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.

@sergiyvoytovych

ng serve --poll=1000

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

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.

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

ng serve -o

@Narain96

@Narain96 - thanks, your solution works for me

@rightisleft

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

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

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

Navigation Menu

Repository navigation

webpack live reload is not working. #1610

91 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

webpack live reload is not working. #1610

Description

Activity

TheLarkInn commented on Aug 9, 2016

burdzand commented on Aug 9, 2016

burdzand commented on Aug 9, 2016

filipesilva commented on Aug 18, 2016

281330 commented on Aug 21, 2016

filipesilva commented on Aug 23, 2016

giovapanasiti commented on Sep 7, 2016

osechet commented on Sep 8, 2016

osechet commented on Sep 9, 2016

FoodBuster commented on Sep 12, 2016

filipesilva commented on Sep 20, 2016

osechet commented on Sep 20, 2016

91 remaining items

rightisleft commented on Apr 16, 2018

virgil-av commented on Aug 16, 2018

kaushik-kumar-roy commented on Aug 17, 2018

chapultepec commented on Sep 13, 2018

doanthai commented on Oct 16, 2018

samuelzapote commented on Dec 4, 2018

narenkram commented on Dec 10, 2018

mgechev commented on Dec 17, 2018

karthicktkm commented on Feb 17, 2019

scorbin commented on Mar 12, 2019

emgillis commented on May 12, 2019

CedX commented on May 23, 2019

angular-automatic-lock-bot commented on Sep 9, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions