Angular-cli: 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 https://github.com/angular/angular-cli/issues/1610#issuecomment-246259005
• inotify reaching watcher max on linux, as described by and solved by @paillave on https://github.com/angular/angular-cli/issues/2389#issuecomment-250964095

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

[mgol]

@filipesilva I found the 3rd scenario where it doesn't live-reload - if you generate a component with the -component suffix; e.g.:

ng generate component title-component

[thesunnypro]

I can confirm doing ng serve doesn't watches for changes.

here is my ng --version log:

angular-cli: 1.0.0-beta.19-3
node: 6.9.1
os: linux x64

I am currently running Ubuntu 16.04

Whereas if I use the same files on my windows running system, changes appear fine.

If you wanna try out a repo just make a new app using ng new app-name

Try changing app.component.html file.

[Namek]

I have greatly increased inotify limit and it resolved issue on Ubuntu 16.10

08.11.2016 22:11 "thesunnypro" [email protected] napisał(a):

I can confirm doing ng serve doesn't watches for changes.

here is my ng --version log:

angular-cli: 1.0.0-beta.19-3
node: 6.9.1
os: linux x64

I am currently running Ubuntu 16.04

Whereas if I use the same files on my windows running system, changes
appear fine.

If you wanna try out a repo just make a new app using ng new app-name

Try changing app.component.html file.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/1610#issuecomment-259260810,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAB5UkzA73bY28URzFqs8RNrteKNADBBks5q8OV3gaJpZM4JgIZF
.

[thesunnypro]

Found the solution for Ubuntu webpack rebuild issue.

Seems it was indeed an problem with inotify max_user_watches as told by @Namek

sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p /etc/sysctl.conf

[nikoTM]

Changing fs.inotify.max_user_watches to 16384 worked for me. The strange thing is that it used to work with 8k watches, anyone knows the reason for the increased number of watches in webpack ?

[dmikhaylov]

I use Vagrant with shared folder to run angular-cli and changing fs.notify.max_user_watches didn't work for me. As I found here: https://github.com/webpack/webpack-dev-server/issues/155#issuecomment-159140735 one solution is to specify --watch-poll option for webpack-dev-server.

So when I change this line: https://github.com/angular/angular-cli/blob/master/packages/angular-cli/tasks/serve-webpack.ts#L83 to poll: true, the reloading starts to work. It's pretty slow though...

[muh-atta]

@dmikhaylov thanks dear, worked for me

//poll: config_1.CliConfig.fromProject().config.defaults.poll
poll: true

and for slow issue try increasing vb.memory to double the current value.

[klmcwhirter]

I have the same issue on MacOS X. It seems to be a problem with just ng server - whereas ng build --watch seems to function as expected.

ng --version
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.19-3
node: 6.5.0
os: darwin x64

I did notice something that may be a hint. It seems the outDir is being deleted and recreated. If I stay in the outDir and monitor the contents of main.bundle.js after a rebuild the directory is empty. If I cd up and back into the outDir the files have been recreated, but the contents are not correct - main.bundle.js does not contain the change that I made.

With ng build --watch I do not experience the same behavior. After a rebuild the outDir contents have been recreated, but not the directory itself. The directory continues to be valid and the contents reflect the change made.

It seems that there are 2 different things going on there ... but thought the additional info may help.

[kareljan]

I had the same problem. I fixed it by simply moving the folder. it was in my "Dropbox (Personal)" folder before. I suspect the reload is tripping over the parentheses.

[ghost]

Thanks to @dmikhaylov , for Vagrant users, adding "poll":true in angular.cli.json file fixed the issue for me.

[pyarun]

I had the same problem with sub-modules.
I guess it has to do with special symbols in path name.

Changing dir name from mf-tracker to mfTracker worked for me.

[papaiatis]

For watching changed files I confirm that setting a higher max_user_watches for inotify worked for me. It was 8k by default. It now rebuilds the bundles on file save.

However, I'm serving my website using Apache 2.4.25. The website reload functionality not working. Is it something that only "ng serve" does?

[shoaib0077]

Same issue,
Angular CLI : 1.0.0-beta.28.3
Node: 7.5.0
OS : Win32 x64

No spaces to app .. here's the path : c:dev\myapp

I reinstalled node and angular a couple of time but nothing worked.

[medeirosrich]

Same issue after installing to latest CLI.

Angular CLI : 1.0.0-beta.28.3
Node: 7.5.0
OS : Win10 x64

No spaces in path.

[jsalazar87]

Same issue here.

Angular-cli: 1.0.0-beta.28.3
node: 7.0.0
Os: Win10 x64

I reinstalled angular-cli in local and global also npm cache clean but didn't work. path is ok as well.

[matze1234]

Same here,
Angular-cli 1.0.0-beta.28.3,
node: 6.5.0
Os: Win7 x64

[miguelcaravantes]

Same issue after install beta.28.3
Os: Windows 10 x64

[miguelcaravantes]

the problem is the new version the @ngtools/webpack
i solved it go back to beta26 and @ngtools/[email protected]

this command
npm install --save @ngtools/[email protected]

maybe work in beta 28

[matze1234]

thanks @miguelcaravantes, that worked for me.

[shoaib0077]

Thanks @miguelcaravantes that worked for me too.

[steveo99]

Thanks @miguelcaravantes that worked for me too.

[silverfoxdev]

Thanks @miguelcaravantes that worked for me too.

[rafaell-lycan]

Same problem here guys:

ng --version
angular-cli: 1.0.0-beta.28.3
node: 7.4.0
os: darwin x64

[MateenKadwaikar]

npm install --save @ngtools/[email protected] this works @rafaell-lycan give it a try

[miguelcaravantes]

@challe try uninstall beta 26
install beta 30
npm install -g @angular/[email protected]
install ngtools 1.2.7
npm install --save @ngtools/[email protected]

this to works for me

[isuruplus]

thanks man @miguelcaravantes, u saved my day.

[xavadu]

Some problem here in Archlinux with a fresh installation via _angular-cli_, I solved it changing the fs.inotify.max_user_watches, also I remember to have this problem previously _angular-cli_ with _gulp-watch_ but at this time I had an error message, so it was easy to figure what was going on.

To change it in archlinux follow these steps:

# Add this line to /usr/lib/sysctl.d/50-default.conf
/usr/lib/sysctl.d/50-default.conf

# Reload all system configurations
sudo sysctl --system

[firatkucuk]

max_user_watches setting doesn't fix my problem. At first change it reloads well but after first it doesn't reload. Totally it's an file system cache issue. After I drop the page cache it works well.

sync;echo 1 > /proc/sys/vm/drop_caches;sync

edit:

just sync works too. No need for drop_caches. Use sync after all save operation.

[sancaruso]

Same problem for me on Ubuntu 14.04 LTS, node: 6.9.2, I tried angular-cli 1.0.0-beta.28.3 / 1.0.0-beta.30 / 1.0.0-beta.31, and I tried the suggestions of this thread...
Nothing worked to solve the problem...

[firatkucuk]

@sancaruso [email protected], angular/cli and 1.0.0-beta.31 and chrome browser fixed my issue.

[sancaruso]

With [email protected], angular/cli 1.0.0-beta.31 and chrome browser it doesn't work for me.

[sancaruso]

Oh! I found the problem... In fact I had a folder with parenthesis in the path of my project, but it was hidden by a symbolic link...

[karthiksundar]

Awesome @dmikhaylov . Adding poll : true solved the problem.

[instantepiphany]

max_user_watches fix doesn't work for me, and I tried using npm install @ngtools/[email protected] as suggested in linked issues and then my project wouldn't even compile - I assume because I have @angular/cli rc.0 and it is too new for the older version of ngtools/webpack.

I don't have any spaces or parenthesis or + in path names, what can I try now?

[alexsaraiva]

ng serve --poll=2000

[filipegorges]

@alexsaraiva That did the trick for me, thanks a lot!

[RPGillespie6]

@filipesilva The inotify fix will not work in all cases. I recently ran into this issue and no matter how high I set the max, it did not fix it. I finally solved it when I figured out that Sublime Text 3 (popular text editor) was using up all available inotifies as soon as I created them. If I killed Sublime, suddenly ng serve was correctly watching files again. The Sublime bug is still open:

https://github.com/SublimeTextIssues/Core/issues/1195

I recommend adding a warning or error-level output to ng serve that lets you know that all inotifies are used up and file watching is unavailable. I can research and submit a PR for this if you think it would be worthwhile.

[jorgedkoala]

Hello,
I have updated a project to angular 4, and i found this issue, in fact watcher is working, then compile is ok, but on the browser app remains on "loading..." with no console errors.

this my ng info:

@angular/cli: 1.0.0
node: 6.9.5
os: darwin x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/compiler-cli: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/platform-server: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0

any suggestion?, Thanks.

[MykhailoDzedzei]

Hello!
I got the same problem. But it works fine with Sublime Text when you press CTRL+S , but in PHPStorm it stops to work after few clicks CTRL+S.

[wulfsberg]

I am seeing spurious errors more along the lines of what @klmcwhirter describes:
A change _is_ being triggered, and the live reload refreshes in the browser, but the source changes are not reflected in the new page. This may be something as trivial as changing a string, and still seeing the old string shown after a refresh.
This could either be _compiling_ a wrong (cached) version of the file, or – more likely – _serving_ a stale version.

I get the feeling we're seeing three different errors:

1) Changes are not detected. This seems to be what the majority of this thread focuses on.
2) Changes are detected, but a stale version still ends up in the browser after a refresh.
3) Changes to footprint/interfaces are not correctly reloaded. (This seems to be quite consistent, and has some dedicated issue reports, but doesn't seem to be fully resolved).

[klmcwhirter]

@wulfsberg - what I observed could be explained by this (I have done this to myself years ago on UNIX):

1. cd outDir
2. rm -fr outDir/* outDir
3. mkdir outDir

At this point outDir exists on the filesystem again (different inode) but so does the old one in the kernel (old inode that was removed from the parent dir). I suspect the main server process remains in the old outDir. This directory is empty. [ note in my example above I do not cd to a different dir after doing the deletes ]

What I cannot explain, however, is why the new outDir directory contains the contents of the old .js bundles.

I, too, suspect what @wulfsberg describes - old cached copy is placed into the new outDir instead of the newly compiled bundle(s). Although I cannot conceive of an implementation of ng server that would read the old bundles into memory, compile and build new bundles but then write out the old cached versions. That does not make sense to me. But it seems that indeed that is what is happening.

I cannot explain this by any technique that uses dir rename and recreate even if a rollback is performed. The new outDir has a different inode. So what I am seeing cannot be due to a dir renaming scheme.

I tested for and eliminated browser caching as a possibility (used chrome dev tools and turned cache off).

For now, I am just using ng build --watch. The issue may be fixed at this point. I simply haven't taken the time to find out.

[actra-gschuster]

@wulfsberg I'm currently facing the same issue with the recompile working but the browser still serving the previous version.
E.g. when changing a HTML file ("a" => "abc") the devtools show the reload, the page even reloads but still displays "a".
When doing another change to the same file ("abc" => "def") it again reloads but now shows the first change (displaying "abc").

Will investigate tomorrow, must be something with my setup which is an ng4-ejected, adapted config that worked well before ejecting and adapting it.

[wulfsberg]

To follow up on @filipesilva's comment in https://github.com/angular/angular-cli/issues/5831#issue-299191668, it does seem likely that the spurious stale results are related to IntelliJ's "Safe write".

It looks as if the Angular-CLI triggers on the first change in the folder (the write of the new, yet-to-be-renamed file), and then throttles further changes, likely in anticipation of a couple more changes to timestamps etc., rather than debouncing the changes and picking up the final result of the barrage.
-This is based on some experiences I have with file change detection in other contexts, not the Angular-CLI code and dependencies, so this is just me guessing wildly.

[filipesilva]

@wulfsberg explanation makes a lot of sense considering https://github.com/angular/angular-cli/issues/6238 (any file change in src/ triggers a rebuild).

[filipesilva]

I'm consolidating https://github.com/angular/angular-cli/issues/5117 with this thread. If you're having this issue, make sure to check out #5117 for some more discussion (e.g. solution for vim users is listed there).

[czimmons]

Same thing here with Windows 7 and the most recent CLI.

Steps when starting from a directory with node_modules from a previous CLI install:

ng new hello-world --skip-install=true
mklink /j "hello-world/node_modules" "./node_modules"
cd hello-world
ng build -aot -w

I then proceed to edit some html in src/app/app.component.html. The change is detected by doesn't appear in the browser.

Hash: aa73a2645a976a8ce9f8
Time: 3144ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {3} [initial]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {3} [initial]
chunk {2} main.bundle.js, main.bundle.js.map (main) 1.13 MB [initial]
chunk {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]

Without changing anything else in app.component.html I save again causing it to recompile and the changes are reflected:

Hash: ba4753ae6244f2bad1a8
Time: 3258ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {3} [initial]
chunk {1} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {3} [initial]
chunk {2} main.bundle.js, main.bundle.js.map (main) 1.13 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]

I see the same behavior whether I use Visual Studio or Visual Studio Code.

_edit: I'm pretty sure omitting the -aot switch fixes this so I'm using that as a temporary fix._

[mrcl]

Same issue here, it works with vim due to the tmp backup files but it fails with visual studio and atom.

I am using Arch Linux, node and angular version are posted below.

@angular/cli: 1.0.6
node: 7.10.0
os: linux x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.6
@angular/compiler-cli: 4.1.3

[ipula]

i had same issue..i changed my directory name with no spaces and only letters..now it reload works fine

[cerino-ligutom]

Had this issue, my directory name had square brackets and spaces. Changed my directory name with no spaces then concatenated it with '-' and now it works.

[dmalikcs]

@alexsaraiva, ng server --poll=2000 worked. Thanks

[lro3818]

ng serve --poll=1000 works for me

[KrystianRos]

Using ng server --aot has 1- change save lag:
Save foo -> nothing
Save bar -> foo
Save foobar -> bar
...

--poll with any value is not working, changing folder name to simple is not working

Using ng-serve without --aot is working without problem
Browser reload is not working- the sources are not correct served.

@angular/cli: 1.1.0
node: 6.11.0
os: win32 x64
@angular/animations: 4.2.5
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.1.0
@angular/compiler-cli: 4.2.5
@angular/language-service: 4.2.5

[KrystianRos]

@filipesilva Is there a chance to some fix in the near future?
Maybe newer webpack version could fix that issues?

[ghost]

@KrystianRos - Use ng serve --poll=1000 it works like a charm for below config:

"dependencies": {
    "@angular/animations": "^4.3.1",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  }

[stefandroog]

Some issue, second change will be picked up:
ng serve --poll=1000 or 5000 doesn't work for me.

When I remove the -aot flag it does work properly.

[jhnoor]

I had problems on Ubuntu 16.04 with ng build --watch running once and quitting. Adding the --poll=1000 flag solved the issue, thanks @alexsaraiva

[briancullinan]

Poll doesn't stop Webstorm from writing to .idea settings or Sourcetree from writing to the .git index. How do I stop ng serve from "recompiling" when these two things happen?

[EricGravel]

When running ng build -w or ng serve, the reload only worked within the top directory "src" despite applying various fixes reported in this thread.

I was running

• Linux 4.12.5-gentoo #2 SMP PREEMPT Sun Sep 17 10:24:52 EDT 2017 x86_64
• node 8.4.0
• npm 5.4.2
• @angular/cli 1.4.5
• fs.inotify.max_user_watches=524288
• using dashes into filenames and directories (but no other fancy characters)
• .angular-cli.json contained:
  { "apps": [ { "root": "src", "outDir": "dist" } ] }

Upgrading @angular/cli resolved my issue:
npm i @angular/[email protected] --save-dev

[irfaan008]

See if any one is having this type of file name. I was having the same and I fixed it using this solution.

My folder was named as 'question' but when I imported it in app module, I did like this
import { QuestionModule } from './Question/Question.module';

Notice in the path there is 'Q'. My code was running perfectly on browser but webpack stopped tracking my files. I changed it to
import { QuestionModule } from './question/question.module';

And now webpack is also working

[xola139]

I used tip @thesunnypro and I had a solution

Tip:
sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p /etc/sysctl.conf

My version CLI:
@angular/cli: 1.4.9

My OS
Fedora 23

[cabaleirog]

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

Steps

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

[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

```bash
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
bash 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

https://github.com/angular/angular-cli/issues/2748#issuecomment-349821610

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

[narendra-ram]

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