ng serve --aot subsequent watches result in EOENT of ngFactory file

[oliverguenther]

Bug Report

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

When running ng serve with --aot, subsequent outputs will break occasionally with the following, likely due to ngFactory files being regenerated and being accessed during that time frame.

This may be connected to #11217 since the result is the same EOENT, however it seems that this is one is not connected to aot.

Area

- [x] devkit
- [ ] schematics

Versions

Angular CLI: 6.0.8 (tested upgrade to v6.1.0-rc.0, same issue)
Node: 8.11.1 (npm: 6.1.0)
OS: linux x64 (Ubuntu 18.04)
Angular: 6.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.8
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.12.0

Repro steps

git clone https://github.com/opf/openproject --branch dev --depth 1
cd openproject/frontend
npm i
npm run serve (alias to ng serve --aot with npm prehook)

# And then simply touch one file multiple times
# When running these steps, the second touch resulted in the error
touch src/app/globals/openproject.ts

The log given by the failure

> ng serve

** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: [ '/**' ]  ->  http://localhost:3000
                                                                                          
Date: 2018-06-27T05:56:55.145Z
Hash: 64f61328b7635bd68864
Time: 19890ms
chunk {main} main.js, main.js.map (main) 3.79 MB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 57.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...
                                                                                          
Date: 2018-06-27T05:57:22.594Z - Hash: 03871495b16f20982ecc - Time: 10849ms
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 3.89 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

#
# ... after updating any file
#

ℹ ｢wdm｣: Compiling...
/tmp/openproject/frontend/node_modules/@angular-devkit/build-angular/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:101
			throw e;
			^

Error: ENOENT: no such file or directory, stat '/tmp/openproject/frontend/src/app/globals/augmenting/modal-wrapper.augment.service.ngfactory.js'
    at Object.fs.statSync (fs.js:948:11)
    at Object.statSync (/tmp/openproject/frontend/node_modules/graceful-fs/polyfills.js:297:22)
    at Storage.provideSync (/tmp/openproject/frontend/node_modules/@angular-devkit/build-angular/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:98:13)
    at CachedInputFileSystem.statSync (/tmp/openproject/frontend/node_modules/@angular-devkit/build-angular/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:251:28)
    at VirtualFileSystemDecorator.statSync (/tmp/openproject/frontend/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:54:48)
    at virtualFilesStats._virtualInputFileSystem.getVirtualFilesPaths.map (/tmp/openproject/frontend/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:103:54)
    at Array.map (<anonymous>)
    at newCallback (/tmp/openproject/frontend/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:101:18)
    at Watchpack.watcher.once (/tmp/openproject/frontend/node_modules/webpack/lib/node/NodeWatchFileSystem.js:54:4)
    at Object.onceWrapper (events.js:317:30)
    at emitTwo (events.js:126:13)
    at Watchpack.emit (events.js:214:7)
    at Watchpack._onTimeout (/tmp/openproject/frontend/node_modules/watchpack/lib/watchpack.js:144:7)
    at ontimeout (timers.js:482:11)
    at tryOnTimeout (timers.js:317:5)
    at Timer.listOnTimeout (timers.js:277:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! openproject-frontend@0.1.0 serve: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the openproject-frontend@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/oliver/.npm/_logs/2018-06-27T05_57_24_488Z-debug.log

Desired functionality

We're running ng serve with AOT due to a strict CSP even during development. Apart from these undeterministic, yet persistent errors, serving with AOT runs fine and is a breeze (thanks for all your work making this possible!)

Mention any other details that might be useful

This occurs in the isolated Angular frontend of our Rails/angular hybrid project management project OpenProject. Thus I believe the best way to reproduce is simply cloning the whole project and running the steps above. No dependencies on Ruby/Rails need to be installed to reproduce it.

[oliverguenther]

After some further searching, I stumbled upon these two issues in the NativeScript trackers:

NativeScript/nativescript-dev-webpack#574
NativeScript/nativescript-dev-webpack#566

And that's where it hit me. We still use a require.context('./components/', true, /^((?!\.(test|spec)).)*\.(js|ts|html)$/); from our ngUpgrade phase while upgrading to Angular. To quote from the one issue:

Calling require.context for the app directory adds a ContextDependency in webpack for it. That causes every change inside the app/ directory to emit a change event for the whole directory.
There's a logic in the TypeScript compiler host (from @ngtools/webpack) that invalidates all files in the changed directory. The invalidation removes all cached information for the virtual files produced by the
Angular AoT compilation (ngfactory files, etc.). Since these files are not in the cache anymore, webpack tries to resolve them from the filesystem and fails. The solution is to remove the ContextDependency
for the app dir, which should also make the rebuilds much faster.

Removing the require.context appears to work fine. I'm suggesting to close this issue then.

[nickbullock]

i've got this issue and removing require.context calls doesn't help. removed webpack-hot-loader's require.context call even

[kspearrin]

@nickbullock I just started running into this as well on aot builds. Did you find a solution?

[nickbullock]

@kspearrin no, i didn't. In my case aot build compiles successfully for the first time and throw this error on recompilations. So we use jit for development and aot for production, but aot recompilations still doesn't work.

[kspearrin]

@nickbullock I re-opened this issue here: #12260

[angular-automatic-lock-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.}