Angular-cli: AOT builds with webpack watch result in EOENT of ngFactory file

[kspearrin]

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

[alan-agius4]

Duplicate of https://github.com/angular/angular-cli/issues/11835

[nickbullock]

@alan-agius4 @kspearrin
i just updated all my '@angular/' dependencies to 6.1.7 and still getting it ...

Projectsx\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:92
throw data[0];
^

Error: ENOENT: no such file or directory, stat '\Projectsxccmapplication.component.ngfactory.js'

With packages
"@angular/cli": "^6.1.7",
"@angular/compiler-cli": "^6.1.7",
"@angular/cdk": "^6.1.7",
"@angular/common": "^6.1.7",
"@angular/compiler": "^6.1.7",
"@angular/core": "^6.1.7",
"@angular/forms": "^6.1.7",
"@angular/http": "^6.1.7",
"@angular/platform-browser": "^6.1.7",
"@angular/platform-browser-dynamic": "^6.1.7"

[kspearrin]

@alan-agius4 Unless I am missing something, I am using the most recent versions of everything. Please see the versions sections above.

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"

My project does not reference or use the Angular CLI. This is using webpack directly with @angular/compiler-cli and @ngtools/webpack.

This should be re-opened.

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a reproduction with the minimum possible code to show the problem please? As unfortunately your current repo is relatively big and hard to pinpoint the root cause. Then you can push this repository to github and link it here.

Thanks.

[kspearrin]

@alan-agius4 I linked two projects in the original post that can reproduce the issue.

[alan-agius4]

Can you please create a simpler reproduction please? As it will be harder to pinpoint the root cause with larger reproductions.

Thanks

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

[segux]

i've got the same issue and coming randomly

[phihochzwei]

Facing the same problem and it really annoying.

[kiriunin]

I also have this problem from today...

[spaceman101]

We have the problem too, we tried all sort of downgrades without success. Please Help.

[damoonrashidi]

We have the same problem since some time today. First build completes without issue, any save after ng serve --aot fails immediately

[smasala]

Workaround:

Remove the following from the angular.json file:

Path: projects -> [your-project-name] -> architect -> build -> options -> assets

{
    "glob": "favicon.ico",
    "input": "src",
    "output": "/"
},

OR change it to:

{
    "glob": "src/favicon.ico",
    "input": "src",
    "output": "/"
},

Note: it seems to be some path or glob in the config not resolving properly

[damoonrashidi]

@smasala It worked! Thanks a lot!

I guess it's kind of expected behaviour that the build would crash and complain about a missing file when there is actually a file missing. It was just unexpected to us.

[smasala]

Just a heads up. Installed the latest [email protected] globally and ran ng serve --aot; in this case the path to the favicon in the generated angular.json is correct now but the entire src/favicon.ico line needs removing from config to prevent --aot from crashing. Not sure why. The quickstart example: https://angular.io/generated/zips/cli-quickstart/cli-quickstart.zip works when the path is corrected but it also runs on the older angular 6.0.0.

Update for 6.2.5
https://github.com/angular/angular-cli/issues/12553#issuecomment-429437052

[Charlyo]

Workaround:

Remove the following from the angular.json file:

Path: projects -> [your-project-name] -> architect -> build -> options -> assets

{
    "glob": "favicon.ico",
    "input": "src",
    "output": "/"
},

OR change it to:

{
    "glob": "src/favicon.ico",
    "input": "src",
    "output": "/"
},

Note: it seems to be some path or glob in the config not resolving properly

I don't have those things in my angular.json file.

[smasala]

Alternatively update the webpack plugin: https://github.com/angular/angular-cli/issues/12553#issuecomment-429437052

[phihochzwei]

Alternatively update the webpack plugin: #12553 (comment)

Thx mate, you saved me on this!

[nickbullock]

i still facing the same issue with angular 6.1.10 and copy-webpack-plugin 4.5.2 =(

[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 [email protected] as mentioned in https://github.com/angular/angular-cli/issues/12553#issuecomment-429434572.

To workaround this problem now you can do npm install [email protected] --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.

[filipesilva]

@nickbullock can you provide a minimal reproduction for us to investigate please? That sounds a bit different than the problems I've been looking at.

[nickbullock]

@filipesilva Unfortunately i can't provide a small reproduction, i'm getting this issue in very large and complicated hybrid angular app =( i updated all dependencies already
@kspearrin did copy-webpack-plugin 4.5.2 helped you?

[d0vi]

npm install [email protected] --no-save is working for me, thank you.

[kspearrin]

@nickbullock @filipesilva Yes, I am still seeing the original issue even with copy-webpack-plugin 4.5.2 . Can be reproduced using the linked repos.

[filipesilva]

@kspearrin I had a look at your repro and can still see it as you said. I think your usecase will only be fixed with https://github.com/angular/angular-cli/pull/12591.

[Michsior14]

@filipesilva The #12591 fixes the problem for me.

After upgrading to [email protected] ang [email protected] on every hot reload I had the following errors:

• non aot

ERROR in ./src/app/app.module.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /home/michal/Documents/Projects/designer/src/app/app.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/home/michal/Documents/Projects/designer/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:762:23)
    at plugin.done.then (/home/michal/Documents/Projects/designer/node_modules/@ngtools/webpack/src/loader.js:41:31)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:189:7)
ℹ ｢wdm｣: Failed to compile.

• aot

ERROR in ./src/app/app.module.ngfactory.js
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: ENOENT: no such file or directory, open '/home/michal/Documents/Projects/designer/src/app/app.module.ngfactory.js'
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
    at Storage.provideSync (/home/michal/Documents/Projects/designer/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:98:13)
    at CachedInputFileSystem.readFileSync (/home/michal/Documents/Projects/designer/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:259:32)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (/home/michal/Documents/Projects/designer/node_modules/@ngtools/webpack/src/webpack-input-host.js:35:51)
    at Observable._trySubscribe (/home/michal/Documents/Projects/designer/node_modules/rxjs/internal/Observable.js:44:25)
    at Observable.subscribe (/home/michal/Documents/Projects/designer/node_modules/rxjs/internal/Observable.js:30:22)
    at SyncDelegateHost._doSyncCall (/home/michal/Documents/Projects/designer/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:22:20)
    at SyncDelegateHost.read (/home/michal/Documents/Projects/designer/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:49:21)
    at WebpackCompilerHost.readFileBuffer (/home/michal/Documents/Projects/designer/node_modules/@ngtools/webpack/src/compiler_host.js:101:44)
    at VirtualFileSystemDecorator.readFile (/home/michal/Documents/Projects/designer/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:38:54)
    at processResource (/home/michal/Documents/Projects/designer/node_modules/loader-runner/lib/LoaderRunner.js:199:11)
    at iteratePitchingLoaders (/home/michal/Documents/Projects/designer/node_modules/loader-runner/lib/LoaderRunner.js:158:10)
    at iteratePitchingLoaders (/home/michal/Documents/Projects/designer/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
    at /home/michal/Documents/Projects/designer/node_modules/loader-runner/lib/LoaderRunner.js:173:18
    at loadLoader (/home/michal/Documents/Projects/designer/node_modules/loader-runner/lib/loadLoader.js:36:3)
ℹ ｢wdm｣: Failed to compile.

After using your changes everyting is working like a charm :+1:

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