Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AOT builds with webpack watch result in EOENT of ngFactory file #12260

Closed
kspearrin opened this issue Sep 13, 2018 · 27 comments · Fixed by #12591
Closed

AOT builds with webpack watch result in EOENT of ngFactory file #12260

kspearrin opened this issue Sep 13, 2018 · 27 comments · Fixed by #12591

Comments

@kspearrin
Copy link

kspearrin commented Sep 13, 2018

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:

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

@kspearrin kspearrin changed the title Webpack watch builds return in EOENT of ngFactory file AOT builds with webpack watch result in EOENT of ngFactory file Sep 13, 2018
@alan-agius4
Copy link
Collaborator

alan-agius4 commented Sep 14, 2018

Duplicate of #11835

@alan-agius4 alan-agius4 marked this as a duplicate of #12260 Sep 14, 2018
@alan-agius4 alan-agius4 marked this as a duplicate of #11835 Sep 14, 2018
@nickbullock
Copy link

nickbullock commented Sep 14, 2018

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

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

Error: ENOENT: no such file or directory, stat '\Projects\x\ccm\application.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
Copy link
Author

kspearrin commented Sep 14, 2018

@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 alan-agius4 reopened this Sep 14, 2018
@alan-agius4 alan-agius4 added severity3: broken freq2: medium needs: repro steps We cannot reproduce the issue with the information given labels Sep 14, 2018
@alan-agius4
Copy link
Collaborator

alan-agius4 commented Sep 14, 2018

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
Copy link
Author

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

@alan-agius4
Copy link
Collaborator

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

Thanks

@HompieKurk
Copy link

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
Copy link

segux commented Oct 11, 2018

i've got the same issue and coming randomly

@phihochzwei
Copy link

Facing the same problem and it really annoying.

@kiriunin
Copy link

I also have this problem from today...

@spaceman101
Copy link

spaceman101 commented Oct 12, 2018

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

@damoonrashidi
Copy link

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

@smasala
Copy link

smasala commented Oct 12, 2018

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
Copy link

@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
Copy link

smasala commented Oct 12, 2018

Just a heads up. Installed the latest angular-cli@6.2.5 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
#12553 (comment)

@Charlyo
Copy link

Charlyo commented Oct 13, 2018

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
Copy link

smasala commented Oct 14, 2018

Alternatively update the webpack plugin: #12553 (comment)

@phihochzwei
Copy link

Alternatively update the webpack plugin: #12553 (comment)

Thx mate, you saved me on this!

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Oct 15, 2018
@nickbullock
Copy link

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

@filipesilva
Copy link
Contributor

We have a couple of PRs that should fix this.

#12588 should fix it for Angular CLI 6.2.x. It pins copy-webpack-plugin@4.5.2 as mentioned in #12553 (comment).

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 #12591 that should fix the problem with any version of copy-webpack-plugin, using Angular CLI or @ngtools/webpack standalone.

@filipesilva
Copy link
Contributor

@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
Copy link

@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
Copy link

d0vi commented Oct 15, 2018

npm install copy-webpack-plugin@4.5.2 --no-save is working for me, thank you.

@kspearrin
Copy link
Author

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

@ngbot ngbot bot added this to the needsTriage milestone Oct 16, 2018
@filipesilva filipesilva added type: bug/fix and removed needs: repro steps We cannot reproduce the issue with the information given labels Oct 16, 2018
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Oct 16, 2018
@filipesilva
Copy link
Contributor

@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 #12591.

@Michsior14
Copy link

@filipesilva The #12591 fixes the problem for me.

After upgrading to angular@7.0.0 ang ngtools@7.0.1 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 👍

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.