search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.76k stars 11.98k forks source link

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

Closed kspearrin closed 6 years ago

kspearrin commented 6 years ago

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:

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 commented 6 years ago

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

nickbullock commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 6 years ago

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

alan-agius4 commented 6 years ago

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

Thanks

HompieKurk commented 6 years ago

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 commented 6 years ago

i've got the same issue and coming randomly

phihochzwei commented 6 years ago

Facing the same problem and it really annoying.

kiriunin commented 6 years ago

I also have this problem from today...

spaceman101 commented 6 years ago

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

damoonrashidi commented 6 years ago

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

smasala commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

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 https://github.com/angular/angular-cli/issues/12553#issuecomment-429437052

Charlyo commented 6 years ago

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 commented 6 years ago

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

phihochzwei commented 6 years ago

Alternatively update the webpack plugin: #12553 (comment)

Thx mate, you saved me on this!

nickbullock commented 6 years ago

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

filipesilva commented 6 years ago

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.

filipesilva commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

kspearrin commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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

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

angular-automatic-lock-bot[bot] commented 5 years ago

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.