Configuring default options for different mat components results in the entire component being in the initial bundle
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 91
Description
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
When configuring default options for mat-components in `ApplicationConfig`, the entire component is being included in the initial bundle rather than being lazy-loaded along with the components that use them.
Obviously, you could load the config at every component, but that would be quite annoying.
```typescript
export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZonelessChangeDetection(),
provideRouter(routes),
/*{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
subscriptSizing: "dynamic",
appearance: "outline",
floatLabel: "always",
} as MatFormFieldDefaultOptions,
},*/
]
};
```
Example with the app in the Stackblitz with the options commented:
```
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-UP2ZEWFZ.js | - | 136.87 kB | 40.26 kB
main-GUD7ZPGJ.js | main | 78.08 kB | 19.85 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 214.96 kB | 60.12 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-5PV7XSBR.js | test-component | 59.39 kB | 10.30 kB
```
Without the comment:
```
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-NOK43ORO.js | - | 195.29 kB | 49.77 kB
main-EVKXTY5S.js | main | 78.18 kB | 19.88 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 273.47 kB | 69.65 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-IGEEQONQ.js | test-component | 304 bytes | 304 bytes
```
If you happen to configure snack-bar, form-field, and dialog, you already reach a bundle size of 405kB, which is just shy of the 500kB warning for initial bundle size. If you add anything remotely big like a CSS theme, you're easily over that limit. Note that if you add a pre-built Material theme, it adds an extra 7kB.
I'm not sure about the internals of the library, but it seems rather odd. I feel like the injection tokens shouldn't cause the rest of the features to be loaded.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/ldgbpznx-ia2hbzsb?file=src%2Ftest.ts,src%2Fmain.ts
### Expected Behavior
Load the actual components lazily.
### Actual Behavior
The components are in the initial bundle.
### Environment
```
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 20.0.2
Node: 22.13.1
Package Manager: npm 9.6.4
OS: win32 x64
Angular: 20.0.3
... cdk, common, compiler, compiler-cli, core, forms, material
... platform-browser, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2000.2
@angular-devkit/core 20.0.2
@angular-devkit/schematics 20.0.2
@angular/build 20.0.2
@angular/cli 20.0.2
@schematics/angular 20.0.2
rxjs 7.8.2
typescript 5.8.3
```
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Ouvrez la reproduction StackBlitz et exécutez son build, en commençant par src/test.ts et src/main.ts ; comparez les rapports du chunk initial et du chunk lazy avec les providers d’options par défaut commentés et activés. Suivez les tokens d’options ApplicationConfig et Angular Material référencés, et considérez l’issue comme terminée lorsque les composants configurés restent dans le chunk lazy plutôt que dans le bundle initial.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend, performance
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 38/100