Angular-cli: ng serve doesn't re-render files most of the time

[mp-tbianchi]

OS?

Windows 10

Versions.

@angular/cli: 1.0.0-rc.0
node: 7.5.0
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

Repro steps.

Happens all the time since update from beta version

Since I updated, ng serve doesn't rerender the file.
It sees the files that have changed and launches a recompilation but the changes don't get included.
It doesn't do this for a couple of recompilations then it refuses to update the files.

What kind of details can I give you?

Thanks

[julianobrasil]

Noticed it here too.

[zhaojunjie163]

The same issue I encountered since I updated to 1.0.0-rc.0

[mfreirehfexp]

Hi, same here

I've installed everything today and after the first launch (with ng serve), every change is listened and the page is rebooted but the changes to the TS are not updated (the TS is not compiled or something)

I've to kill the liveserver and start it again for every change

OS?

Windows 10

Versions.

@angular/cli: 1.0.0-rc.0
node: 6.10.0
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8
@ngtools/webpack: 1.2.11

[Evekt]

Hi,

i have the same issue, but it worked 2 Days ago with the 1.0.0-beta.32 Version.

OS:
Windows 7 64Bit

Version:
@angular/cli: 1.0.0-rc.0
node: 7.7.1
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.9

[mp-tbianchi]

@Momotanien Did you have a different version 2 days ago?

[Evekt]

@mp-tbianchi Ups, sorry forgot to mention it. I updated my entry.

[instantepiphany]

I had the same issue with rc.0.

[instantepiphany]

I believe this may be fixed by a pending PR: https://github.com/angular/angular-cli/pull/5164

[mfreirehfexp]

Hi
I've updated to @angular/cli: 1.0.0-rc.1and the problem still remains
I deleted the hole node_modules after the update and reinstall everything

[crain]

Is @angular/cli: 1.0.0-rc.1 released? I can't find it under https://github.com/angular/angular-cli/releases.

[mp-tbianchi]

Maybe he meant this commit :

https://github.com/angular/angular-cli/commit/214be993c4d5f34e36466d2076dab44bb2226173

[mfreirehfexp]

Sorry
Probably it was a mistake, I put 1.0.0-rc.1 manually on my project and update all.
I check it with ng version and didn't realise it could not be publicly released yet

[filipesilva]

I can't reproduce this in a brand new project. Can you give me exact repro steps? e.g. the project where this happens (a new project for instance, all commands you run to see this, the exact file you change.

[filipesilva]

https://github.com/angular/angular-cli/issues/5137 might be related, but it happens exclusively with --aot.

[ovalol]

I had the same issue with @angular/[email protected].
Since I updgrade from [email protected] Webpack successfully compile changes in ts files but they are not correctly loaded in browser. I have to rerun ng serve to get changes correctly loaded in broswer. Changes are only correctly compile when I change an import in typescript file.
It works fine with html and scss files.

I create a brand new project with @angular/[email protected] and got same issue.

OS

Windows 7 x64

Version

@angular/cli : 1.0.0-rc.1
@angular/compiler-cli : 2.4.9
node : 7.5.0

[filipesilva]

@ovalol I really need exact reproduction steps, otherwise there isn't much I can do but wait for it to happen randomly.

[mfreirehfexp]

Hi
I'm using W10
I only used the "--scss" flag to get all the scss files compiled and included (great option btw)
The other change I did was the custom theme option and added the new Angular Material
I continued working with routers, ngrx/store, and firebase.
So far it is still happening randomly, but only in TS changes, not in templates or scss changes.
I'll try to make a repo so you can be able to test it
Thanks!

[ovalol]

@filipesilva here steps to reproduce

Steps

• ng new foo
• cd foo
• npm start
• ng g component bar
• change {{title}} by <app-bar></app-bar> in app.component.html
• change bar template with {{title}}
• add title attribute to BarComponent class with a default value (ex: 'foo-bar').
• Webpack compile correctly but an empty page is display.
• rerun npm start and now page correctly display 'foo-bar' string

[mp-tbianchi]

Hey, I just tried creating a new project too.

1. ng new testrepro
2. cd testrepro
3. ng serve
4. Modify AppComponent, for example :

export class AppComponent implements OnInit {
  title = 'app works!';

  private testVar: string;

  ngOnInit(){
    console.log(4);

    this.testVar = 'blabla';
  }
}

Console says recompiling..., lists files that are recompiling and then compiled successfully.
But changes can not be seen in the browser.

[mfreirehfexp]

One thing to add
if the page doesn't update and I add an empty line and save the page doesn't still shows the changes. I mean the TS compiler gets freeze, doesn't recover from that point.

[filipesilva]

@ovalol I tried following your steps exactly as you posted, looking at the changes in the browser, and I could always see the correct output (first app works, then bar works, then nothing, then foo-bar). I didn't need to restart the server to see changes.

@mp-tbianchi I tried your changes as well, and could see 4 printed in the console log.

@mfreirehfexp I haven't seen that behaviour yet but will keep an eye out for it.

I noticed that you three are using Windows (7 and 10). I am using Windows as well and can't see this... maybe there's something else at play.

Are you using a symlink or a juntion on your project path? Is there anything else odd you've seen? Do you get vendor.bundle.js on builds?

[mp-tbianchi]

@filipesilva I don't have any symlink or junctions in the path.

I've had the bug on "old" projects that have been updated to the latest angular/cli and also new projects (in the example above). Both projects are in separate folders.
For vendor.bundle.js, do you mean if the file is generated? In that case, yes it is.

[ovalol]

@filipesilva I m not using symlink or anything else. Everything works fine with the previous version[email protected].
And vendor.bundle.js is correctly generated.

[mp-tbianchi]

Oh, I just noticed something very weird.

What IDE/Editor do you all use?

When I use webstorm to modify the file : if I save with CTRL+S, sometimes the change is seen, sometimes not (I track this by checking if [rendered] is present on the main.bundle.js line).
If I use Webstorm's auto save by navigating to my console (Conemu) without CTRL+S, the change is seen less often.

But if I modify the file with Notepad++ and save with CTRL+S, the [rendered] appears everytime.

[mfreirehfexp]

@mp-tbianchi I also use Webstorm
haven't try with Notepad, I will in a few moments
@filipesilva I'll copy the state on the next ocurrence

[ovalol]

I use webstorm to.
I disable Use "safe write" option and everything seems ok.

[mp-tbianchi]

https://webpack.github.io/docs/troubleshooting.html#file-saves-in-webstorm-don-t-trigger-the-watcher

huh... The more you know.... But it's weird I didn't have this problem before

[mfreirehfexp]

@ovalol @mp-tbianchi I'm trying with that
So far it seems to work
I'll continue along the day and tell you how it works

[filipesilva]

Hm... I know there's a problem with junctions in windows (#3797) so I thought that might be it.

Speaking of webstorm, I know there was a change we made regarding file changes in the past (#4542) for similar reasons.

So it seems that the culprit is some weird interaction between webstorm and webpack? Jeez... I didn't know that happened. Good job finding it!

I don't have a better solution than disabling safe write either. But let me know if that fixes it for you over the next few days.

[mfreirehfexp]

Hi
I've been working a couple of hours and the number of errors is greatly reduced.
But I still find the necessity of kill the server and start again
I'll look if I find a patron and tell you
Thanks!

[mp-tbianchi]

After a couple of days of testing, can't say I've seen any errors since I disabled safe write.

[filipesilva]

That's very good to hear! I know it sucks to have to disable safe write though, so I'm leaving this issue open to see if we can find a way that isn't necessary.

I also added it to FAQs so other people can find it.

Thanks to all that helped test this and came up with solutions, you guys rock!

[instantepiphany]

I had this issue on NVIM/VIM, not using Webstorm.

[micsimon]

i have exactly the same issue on Win 10, with IntelliJ IDEA and rc0-rc4. an "old" cli beta-version works perfectly. deactivating "safe write" fixed it for me.

@instantepiphany
vim has probably a similar "safe write" behavior

[sjanofsky]

I had the same problem until I stopped using --aot=true and now anytime I save a file the changes are picked up properly.

What is aot doing that would cause the changes not to be picked up?

[jamilalisgandarov]

Guys, I am using Visual Studio Code and getting same problem, I couldn't find 'safe write' thing in my IDE.

[mfreirehfexp]

Hi @jamilalisgandarov
The 'safe-write' option is a Webstorm config, I don't know if VisualStudio has such an option

[hpawe01]

@instantepiphany, with VIM you can use the solution from here:
:set backupcopy=yes

[instantepiphany]

@hpawe01 This seems to fix the issue for me, thanks so much for the link!

[Tommyf]

Are there two different mechanisms being used to detect the changes? When I save in VIM (without the backupcopy setting) ng serve recompiles, but whatever does the recompiling is not picking up the actual change...

[filipesilva]

Consolidating this thread with https://github.com/angular/angular-cli/issues/1610, it's roughly the same and better to keep discussion in a single place.

[xiehongyang]

@ovalol u are totally right

[mejmo]

The same behaviour here with 1.0.0. The changes are applied in 50% of cases. The browser gets updated, but the change of the .ts file is not there. Safe-write option in WebStorm enabled.

[xiehongyang]

@mejmo make Safe-write option in WebStorm disabled.

[mejmo]

It helped and solved the issue. Thank you.

[briancullinan]

@filipesilva Instead of disabling safe-write is it possible to base watches off of actual file changes?

Clearly the mtime of a file will change, but if the contents are exactly the same should it really fire off a recompile?

If I have webstorm open, and I just click on the window, and then click on the browser window, it still recompiles, interrupting my workflow. Even if the file hasn't changed.

[briancullinan]

What is the "safe-write" setting for SourceTree? For some reason whatever SourceTree does to refresh is causing a recompile. This seems kind of silly because some other alert could come along and force Windows to refresh it's GDM. It doesn't seem like "developing angular" should be interrupted by whichever OS you are using.

[briancullinan]

Disabling safe-write didn't change anything for me. Still recompiles even though nothing has changed.

[briancullinan]

I have the opposite of this problem, it reloads too often because webstorm changes file times behind my back and their is no way to ignore it with the cli https://github.com/angular/angular-cli/issues/8033#issuecomment-336305650

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