Are there any plans for @ngtools/webpack to support Webpack 5?

[JonWallsten]

🚀 Feature request

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Description

I tried to use @ng-tools/webpack with Webpack 5 but it doesn't seem to work.
According to Webpack-team the fault might be loader. I can't explain in detail whats wrong since I don't have a deep understanding of the loader nor Webpack. But there seem to be some issue with how caching is implemented.

Please see this issue for more info: webpack/webpack-cli#1985

I tried to create create a minimal reproduction but it only happens with our full monorepo setup. When using the repro I don't end up in the ResolverCachePlugin with the Angular files at all, and I don't know how to force it either.

Maybe someone in the team can share some light on what's happening?

Describe the solution you'd like

Sorry. I'm no help here.

Describe alternatives you've considered

The alternative is to stay with Webpack 4.x.x

[alan-agius4]

Which version of the plugin are you using?

[JonWallsten]

@alan-agius4: Sorry for not mentioning that. Last time I tried it I used 11.0.0-rc.1. It was a week ago or so.

[alan-agius4]

Can you try to use version 11 final please? If the problem persists kindly provide a minimal reproduction. Thanks.

In version 11, there is experimental support for Webpack 5.

[JonWallsten]

I'll do my best to recreate it. However I would really appreciate if someone could help me explain in short what ResolverCachePlugin is and why files end up there is some cases, and in some not. I've added a and imported stuff from @angular/material/dialog and it still won't recreate what's happening in our real repo.

[clydin]

ResolverCachePlugin is part of Webpack (code) and is used when the new Webpack 5 caching is enabled. As to why Webpack is crashing in that plugin, this is currently under investigation. However, it is currently recommended to disable the new caching via the cache: false option in the Webpack configuration.

[JonWallsten]

ResolverCachePlugin is part of Webpack (code) and is used when the new Webpack 5 caching is enabled. As to why Webpack is crashing in that plugin, this is currently under investigation. However, it is currently recommended to disable the new caching via the cache: false option in the Webpack configuration.

Thanks for the reply. I'm currently trying to reproduce the issue in a small repo but I'm unable to. It however crashes every single build in our main repo. I've stripped down our repo to bare minimum and adding generic test components so that I don't have to upload company property. I've been importing @angular/material/dialog in components, in services, in route guards and every single place where I can think of, but I still can't reproduce the error in our main repo.
When logging out all resolved files in the ResolveCachePlugin I can see that app.module.ts is trying to resolve ./__ivy_ngcc__/fesm2015/dialog.js multiple times even though I don't have any direct import in app.module.ts to that file. I don't know why app.module.ts would be the issuer for that file. According to a member of the Webpack-team this is a bug in AngularCompilerPlugin and as here, without a repro they don't wanna investigate. I've been trying for a long time creating a simple repro. But I'm unable to.

I've pasted my findings in this ticket:
webpack/webpack-cli#1985

[clydin]

Thank you for looking deeper into this issue. Our investigation has been focused on attempting to ascertain how the ResolverCachePlugin has entered an invalid state as well as whether this is indeed an invalid state. However, the new caching code is quite complex and the call stacks are non-trivial so the investigation may take some time.

[JonWallsten]

@clydin: Let me know if you need any assistance. Do you guys have a repo where you can reproduce the issue? In that case I won't try to create a minimal repo.