Browser does not refresh after code changed

angular-cli: 1.0.0-beta.28.3
node: 6.9.2
os: win32 x64
@angular/common: 2.4.5
@angular/compiler: 2.4.5
@angular/core: 2.4.5
@angular/forms: 2.4.5
@angular/http: 2.4.5
@angular/platform-browser: 2.4.5
@angular/platform-browser-dynamic: 2.4.5
@angular/router: 3.4.5
@angular/compiler-cli: 2.4.5

ng serve
code change
webpack: Compiling... Hash: 228604d16756d5a0fdd3 Time: 717ms chunk {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 222 kB {4} [initial] chunk {1} main.bundle.js, main.bundle.map (main) 3.97 kB {3} [initial] chunk {2} styles.bundle.js, styles.bundle.map (styles) 10 kB {4} [initial] chunk {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.64 MB [initial] chunk {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] webpack: Compiled successfully.

browser don't refresh. do not solve the problem
rerun ng serve => change available

That's weird I just created a new project with 1.0.0-beta.28.3 and it is refreshing just fine.

Yes. I just did a npm i -g angular-cli and ng new bla

I double checked it already

And I restarted my machine

I can confirm. When editing the typescript it doesn't refresh. If you update the template, it refreshes.

I just unistalled it and reinstall it so I'll go back to previous, have to do a workshop tomorrow and need cli :(

Looks like the typescript isn't getting compiled. I edit the typescript (introduce a function) and adjusted the template so that it would refresh. The new function doesn't get called (when clicking on a button to trigger the method) after the page refresh.

Instead get an error saying that the function doesn't exist.

Stopping ng serve and restarting it will recompile the typescript and suddenly the function exists.

Same issue here. I just tried uninstalling/reinstalling everything and running ng update, no change. Still seeing old .ts code until I stop and restart ng serve

Can you try npm install --save @ngtools/webpack@1.2.4 to see if that fixes the issue?

Thx, that's it.

@beeman

@beeman - that worked for me too, thanks!

fix(@ngtools/webpack): change of CSS no longer breaks rebuild

fix(@ngtools/webpack): change of CSS no longer breaks rebuild (#4334)

I have the same issue with beta 29. This time it doesn't solve to install ngtools/webpack

fix(@ngtools/webpack): change of CSS no longer breaks rebuild (angula…

A late comment from a newbie.

Using Angular 4.0.2, it seems that the 'rebuild on change' does not work if the project path contains '('. Potentially other legal characters could also have this impact.

I am facing the same problem now.
@angular/cli: 1.2.0
It detect the changes on .ts and html files, it says that it's compiling, the browser refreshes but nothing change. I can delete everything from many .ts files and it don't even show an error. Only way to see the changes is stopping and ng serve again

I have noticed this on VS2017 15.7.1 ,dotnet core 2.1 and Angular/Angular-CLI ^6.0.3

(I removed webpack from packages completely - The angular add new does not use it so I nuked it too based on the dotnet core 2 template based on angular 5 (not the dot net core 1 template based on angualr 4))

It was not refreshing my page from VS but when I did a ng serve it worked as expected.
I noticed in VS that even on refreshing and I made changes they did not appear.
- http://localhost:63294/
I looked in the output for ASP.NET Core Web Server
- ** Angular Live Development Server is listening on localhost:50273, open your browser on http://localhost:50273/ **
- This WAS not the port VS studio opened for me
- When I went to this PORT it was changing fine

I realised it was serving an old build for some reason. Where does dotnet core serve build from? the /dist directory obviously.
I deleted everything in the /dist directory.
Refreshed the page on the port VS gave me and bam! It started working again with auto rebuild and auto refresh.

I think if something is in the dist folder then dotnet will NOT proxy to the CLI server. Make sure its clean

@ppumkin I have this issue too. This needs to be reported to Microsoft.

@ibraheemalkilanny Turning on the "Disable cache (while DevTools is open)" setting in the Chrome Developer Tools (F12 to open Dev Tools, then F1 to open settings page) resolved the issue for me.

I was having the same issue, I resolved my issue by:

Updating all NuGet packages (I was running things in Visual Studio).
Updating all packages via ng update --all (that is if you are lucky), I had to update the core first and then find my way trough the rest.
Then I do a ng build --prod because some issues are only discovered then.
Then an ng serve (I think this is not necessary)
Delete the files from the dist folder

I have noticed this on VS2017 15.7.1 ,dotnet core 2.1 and Angular/Angular-CLI ^6.0.3

(I removed webpack from packages completely - The angular add new does not use it so I nuked it too based on the dotnet core 2 template based on angular 5 (not the dot net core 1 template based on angualr 4))

It was not refreshing my page from VS but when I did a ng serve it worked as expected.

I noticed in VS that even on refreshing and I made changes they did not appear.

http://localhost:63294/

I looked in the output for ASP.NET Core Web Server

** Angular Live Development Server is listening on localhost:50273, open your browser on http://localhost:50273/ **

This WAS not the port VS studio opened for me

When I went to this PORT it was changing fine

I realised it was serving an old build for some reason. Where does dotnet core serve build from? the /dist directory obviously.
I deleted everything in the /dist directory.
Refreshed the page on the port VS gave me and bam! It started working again with auto rebuild and auto refresh.

I think if something is in the dist folder then dotnet will NOT proxy to the CLI server. Make sure its clean

Hi, This workaround worked perfecte for me!

I have this issue too.

For me it's when I edit component styles (*.scss) that it won't refresh.
@angular/cli": "^7.3.9
@ngtools/webpack@7.3.9

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

fix(@ngtools/webpack): change of CSS no longer breaks rebuild (angula…

Navigation Menu

Repository navigation

Browser does not refresh after code changed #4329

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Browser does not refresh after code changed #4329

Description

Activity

trevor-hackett commented on Feb 1, 2017

web-dave commented on Feb 1, 2017

web-dave commented on Feb 1, 2017

trevor-hackett commented on Feb 1, 2017

web-dave commented on Feb 1, 2017

trevor-hackett commented on Feb 1, 2017

joshorvis commented on Feb 1, 2017

beeman commented on Feb 1, 2017

web-dave commented on Feb 1, 2017

joshorvis commented on Feb 2, 2017

web-dave commented on Feb 2, 2017

nisserne commented on Apr 19, 2017

adrianolsk commented on Jun 30, 2017

p10tyr commented on May 23, 2018

kilanny commented on Aug 16, 2018

apoblock commented on Aug 20, 2018

Hypenate commented on Aug 22, 2018

rodrigoporcionato commented on Oct 15, 2018

id1945 commented on Nov 7, 2018

svassr commented on May 16, 2019

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions