angular / angular/components

Configuring default options for different mat components results in the entire component being in the initial bundle

Offen
#31,377 5 Kommentare 3 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### 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
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Öffne die StackBlitz-Reproduktion und führe ihren Build aus, beginnend mit src/test.ts und src/main.ts; vergleiche die Berichte zum initialen und zum lazy Chunk mit auskommentierten und aktivierten Providern für die Standardoptionen. Verfolge die referenzierten ApplicationConfig- und Angular Material-Optionstokens und betrachte das Issue als erledigt, wenn die konfigurierten Komponenten im lazy Chunk statt im initialen Bundle verbleiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.