angular / angular/components

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

未关闭
#31,377 5 条评论 3 个 reaction 已指派 0 人 在 GitHub 查看
area: material/form-field P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

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

贡献指南

打开贡献指南

调研方向

打开 StackBlitz 复现并运行其构建,从 src/test.ts 和 src/main.ts 开始;比较默认选项 providers 被注释和启用时的初始 chunk 与 lazy chunk 报告。跟踪所引用的 ApplicationConfig 和 Angular Material 选项 token,并在已配置的组件保留在 lazy chunk 中而不是初始 bundle 中时,认为该 issue 已完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend, performance
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
38/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。