Angular-cli: ng serve. File change detected but no change in the output

[raducostea]

ng --version

angular-cli: 1.0.0-beta.28.3
node: 6.9.1
os: win32 x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/compiler-cli: 2.4.6

On windows 10

ng new testproject
ng serve

Project opens just fine. If i edit the html file the change is shown in the browser. If i change a .ts file, i see the compiler recompiling but nothing gets change.

[WDS] App updated. Recompiling...
[WDS] Nothing changed

Even if i reload the page, still no change. I can even delete the entire component, it recompile but no change.

If i close the ng server and start it again the code gets updated.

[danielsogl]

Same as #4338

[dtiong]

I am having the same issues with the new release 2.4.6. Yesterday, with version 2.3.* it was working fine.

[mrlund]

@dtiong Could be an issue with capitalisation of the includes, like https://github.com/angular/angular-cli/issues/2833#issuecomment-261939556

[chebum]

@raducostea @MTechDE @msmorgan I'm afraid #4338 doesn't solve this issue. I prepared a simple project illustrating it:
https://github.com/chebum/watermarkly-ng
Please clone the repo and perform these tasks
npm install
ng serve

Run Chrome. Navigate to http://localhost:4200/editor and open developer tools for breakpoint to hit.
Once an image appears, open src\app\watermark-editor\watermark-editor.component.ts file and uncomment the debugger command at line 33. Save. The cli will detect the change, will recompile, browser will reload, but the code won't change. You will still have a commented debugger; expression.

angular versions are as following:
@angular/cli: 1.0.0-rc.4
node: 6.10.1
os: win32 x64
@angular/animations: 4.0.0-rc.5
@angular/common: 4.0.0-rc.5
@angular/compiler: 4.0.0-rc.5
@angular/core: 4.0.0-rc.5
@angular/forms: 4.0.0-rc.5
@angular/http: 4.0.0-rc.5
@angular/platform-browser: 4.0.0-rc.5
@angular/platform-browser-dynamic: 4.0.0-rc.5
@angular/router: 4.0.0-rc.5
@angular/cli: 1.0.0-rc.4
@angular/compiler-cli: 4.0.0-rc.5

Windows 10 Enterprise 64bit English.

I tried the project in two locations: C:\Users\ivan.nikitin\watermarkly-ng\ and C:\watermarkly with the same results

[ReneMoraales]

I'm having this exact problem on OS X Sierra aswell. I save a file, it recompiles, but the changes are not reflected and the hash remains the same. I'm just getting into Angular and this has been ridiculously frustrating.

[xmon]

I'm having the same problem, on @angular/cli: 1.0.1, node: 7.9.0, os:win32 x64.

I code with PhpStorm, solved here

[18steps]

Same issue with CLI 1.0.3, using WebStorm

@xmon's solution worked for me as well.

Disabling the option _Use "safe write"_ under _Appearance / System Settings_

@angular/cli: 1.0.3
node: 7.10.0
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

[oxy-code]

same problem and I'm using sublime-text-2. Any solution on that?

@angular/cli: 1.0.3
node: 6.10.3
os: linux ia32
@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.3
@angular/compiler-cli: 4.1.3

[compmaster]

Confirmed. You must uncheck Use "safe write" option in IntelliJ IDEA to solve this issue.

This option is located in: File -> Preferences -> Appearance & Behavior -> System settings

[oxy-code]

@compmaster do you've any solution for sublime-text?

[compmaster]

@oxy-code I don't use sublime-text but try to disable atomic save in settings:
https://stackoverflow.com/questions/20634684/what-is-sublime-text-doing-when-i-save-a-file

[jongunter]

Someone should add this as a note to the CLI documenation, especially considering the InteliJ family of IDEs is so widely used among Angular devs.

[CraigWarford]

I'm using VSCode, which does not do atomic save. But I think the problem I'm having is that the latest angular-cli is no longer putting the chunk hash/hash on the module names with ng serve (after updating angular-cli to latest for an existing project), and when Chrome reloads, it's using the browser cache, since the filename has not changed. Simple code changes trigger the rebuild, but when the browser reloads, it's still the same old code. Closing the browser and reopening loads the change. I'm now studying webpack config so that I can see how to correct that, and see if it helps. So far, nothing I've tried in the webpack config file is working...

Addendum: Note that ng build --prod still adds the hash numbers just fine. Only ng serve has stopped doing this.

[CraigWarford]

Yeah, webpack configurations are apparently not exposed through CLI (at least not without jumping through serious hoops), so this needs to be fixed in CLI. The odd thing is, even with Developer tools open, and selecting the "Empty Cache and Hard Reload" option, it still loads the old file. I literally have to close and reopen my browser with every change now, after upgrading CLI according to the instructions on the site.

[eyalc4]

how is this issue closed, if so many people are still suffering from it?
Mac os, angular cli 4.4.3, phpStorm: safe save is un-checked
i am waisting so much time on this inconsistency of compiling, that for the first time, i really considering a switch to React.

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