provideSignalFormsConfig prevents lazy-loading of forms #67909
Description
Which @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
Adding the provideSignalFormsConfig(...) provider to the application root providers prevents the signal forms code to be lazily-loaded, even if forms are only used in lazy-loaded components. This adds almost 12KB of compressed JS to the eagerly-loaded chunks.
Please provide a link to a minimal reproduction of the bug
https://stackblitz.com/edit/stackblitz-starters-gyuvqqyd?file=src%2Fmain.ts
Please provide the exception or error you saw
No exception.
Run the following commands:
- pnpm i
- pnpm build
Observe the following output:
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-4FHMO4KG.js | - | 124.59 kB | 36.65 kB
main.js | main | 85.51 kB | 21.65 kB
styles.css | styles | 0 bytes | 0 bytes
| Initial total | 210.10 kB | 58.30 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-52YCNIX4.js | feat-routes | 46.39 kB | 11.71 kB
The lazy chunk contains the lazy-loaded test form as well as the signals form code.
Now uncomment the call to `provideSignalFormsConfig()` in `main.ts`, and re-run the `pnpm build command`. Observe the following output:
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-WES5NYHA.js | - | 170.20 kB | 47.33 kB
main.js | main | 85.57 kB | 21.68 kB
styles.css | styles | 0 bytes | 0 bytes
| Initial total | 255.77 kB | 69.01 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-WN6GIWCJ.js | feat-routes | 805 bytes | 805 bytes
The lazy-loaded chunk doesn't contain the signals form code anymore: it has been moved to the eagerly-loaded chunk.
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 21.2.4
Angular : 21.2.6
Node.js : 22.22.0
Package Manager : pnpm 8.15.6
Operating System : linux x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build │ 21.2.4 │ 21.2.4 │
│ @angular/cli │ 21.2.4 │ 21.2.4 │
│ @angular/common │ 21.2.6 │ 21.2.6 │
│ @angular/compiler │ 21.2.6 │ 21.2.6 │
│ @angular/compiler-cli │ 21.2.6 │ 21.2.6 │
│ @angular/core │ 21.2.6 │ 21.2.6 │
│ @angular/forms │ 21.2.6 │ 21.2.6 │
│ @angular/platform-browser │ 21.2.6 │ 21.2.6 │
│ @angular/router │ 21.2.6 │ 21.2.6 │
│ rxjs │ 7.8.1 │ 7.8.1 │
│ typescript │ 5.9.3 │ 5.9.3 │
└───────────────────────────┴───────────────────┴───────────────────┘
Anything else?
Forms are rarely part of the landing pages of the app, so being able to lazy-load them is a good thing.
It's possible to move the forms configuration to all lazy-loaded routes and components providers, but this prevents developers to centralize this configuration.
Maybe an additional entry point (@angular/forms/signals/config) could fix this issue?