AOT builds with webpack watch result in EOENT of ngFactory file

Trying to perform Angular AOT builds while using webpack --watch results in errors. The first build works fine, however, subsequent builds from changes triggered by watch fail with:

Error: ENOENT: no such file or directory, stat 'C:\myapp\src\popup\app-routing.module.ngfactory.js'

This problem did not start until I upgraded angular CLI to v6 as well as webpack 4. See upgrade commit here: https://github.com/bitwarden/browser/commit/aaf774308e50823983a0823361271f15367927da

I am using webpack directly rather than through the Angular CLI (ng serve).

This seems like the same issue here (user is using the CLI here): https://github.com/angular/angular-cli/issues/11380 . It was closed by the author since he found a workaround, however, the workaround does not apply to my project.

Other related issues I found on the web:

• https://github.com/NativeScript/nativescript-dev-webpack/pull/574
• https://github.com/NativeScript/nativescript-dev-webpack/issues/566

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [x] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

node --version
v10.8.0

"@angular/compiler-cli": "^6.1.7",
"@ngtools/webpack": "^6.2.1",
"webpack": "^4.18.0",
"webpack-cli": "^3.1.0"

Repro steps

I have two OSS projects where this issue is occurring. You can use them as examples to reproduce this error from if you like.

https://github.com/bitwarden/browser https://github.com/bitwarden/browser/blob/master/webpack.config.js

https://github.com/bitwarden/web https://github.com/bitwarden/web/blob/master/webpack.config.js

On either, just run:

npm install
npm run build:prod:watch

Then change a file in ./src/popup/ or ./src/app to trigger the watch.

The log given by the failure

Error: ENOENT: no such file or directory, stat 'C:\myapp\src\popup\app-routing.module.ngfactory.js'
    at Object.statSync (fs.js:815:3)
    at Object.statSync (C:\myapp\node_modules\graceful-fs\polyfills.js:297:22)
    at Storage.provideSync (C:\myapp\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13)
    at CachedInputFileSystem.statSync (C:\myapp\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:251:28)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (C:\myapp\node_modules\@ngtools\webpack\src\webpack-input-host.js:70:52)
    at Observable._trySubscribe (C:\myapp\node_modules\@ngtools\webpack\node_modules\rxjs\internal\Observable.js:43:25)
    at Observable.subscribe (C:\myapp\node_modules\@ngtools\webpack\node_modules\rxjs\internal\Observable.js:29:22)
    at MapOperator.call (C:\myapp\node_modules\@ngtools\webpack\node_modules\rxjs\internal\operators\map.js:29:23)
    at Observable.subscribe (C:\myapp\node_modules\@ngtools\webpack\node_modules\rxjs\internal\Observable.js:24:22)
    at SyncDelegateHost._doSyncCall (C:\myapp\node_modules\@angular-devkit\core\src\virtual-fs\host\sync.js:22:20)
    at SyncDelegateHost.exists (C:\myapp\node_modules\@angular-devkit\core\src\virtual-fs\host\sync.js:61:21)
    at WebpackCompilerHost.fileExists (C:\myapp\node_modules\@ngtools\webpack\src\compiler_host.js:195:44)
    at VirtualFileSystemDecorator._statSync (C:\myapp\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:24:39)
    at VirtualFileSystemDecorator.statSync (C:\myapp\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:60:29)
    at virtualFilesStats._virtualInputFileSystem.getVirtualFilesPaths.map (C:\myapp\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:123:54)
    at Array.map (<anonymous>)
    at newCallback (C:\myapp\node_modules\@ngtools\webpack\src\virtual_file_system_decorator.js:121:18)
    at Watchpack.watcher.once (C:\myapp\node_modules\webpack\lib\node\NodeWatchFileSystem.js:54:4)
    at Object.onceWrapper (events.js:273:13)
    at Watchpack.emit (events.js:182:13)
    at Watchpack._onTimeout (C:\myapp\node_modules\watchpack\lib\watchpack.js:144:7)
    at ontimeout (timers.js:424:11)
    at tryOnTimeout (timers.js:288:5)
    at listOnTimeout (timers.js:251:5)
    at Timer.processTimers (timers.js:211:10)
npm ERR! code ELIFECYCLE

Desired functionality

Be able to perform AOT builds with webpack --watch.

Mention any other details that might be useful

https://github.com/bitwarden/browser https://github.com/bitwarden/web

Interestingly, this same issue does not occur on 2 other electron-based projects that use angular/webpack in the same way, so I am not sure what the critical difference is. Ex:

https://github.com/bitwarden/desktop

[HompieKurk]

Any news on this issue? We’re experiencing exactly the same problem since today. We hoped it was the addition of Codelyzer (4.5.0) to the project, but that doesn’t seem the case.

[filipesilva]

We have a couple of PRs that should fix this.

https://github.com/angular/angular-cli/pull/12588 should fix it for Angular CLI 6.2.x. It pins copy-webpack-plugin@4.5.2 as mentioned in https://github.com/angular/angular-cli/issues/12553#issuecomment-429434572.

To workaround this problem now you can do npm install copy-webpack-plugin@4.5.2 --no-save. This way your lockfile shouldn’t even change.

For version 7 we have a more complete fix in https://github.com/angular/angular-cli/pull/12591 that should fix the problem with any version of copy-webpack-plugin, using Angular CLI or @ngtools/webpack standalone.