Description
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: bitwarden/clients@aaf7743
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): #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:
- fix(AoT): stop using require.context in Angular apps NativeScript/nativescript-dev-webpack#574
- no such file or directory, stat app-routing.module.ngfactory.js NativeScript/nativescript-dev-webpack#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: