Skip to content

Commit c4f3282

Browse files
json-derulojson-derulo
committed
docs: optimize bundle size
1 parent 99aefe1 commit c4f3282

14 files changed

+143
-105
lines changed

‎angular.json

-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
"outputPath": "dist/angular-intl-demo",
5252
"index": "projects/angular-intl-demo/src/index.html",
5353
"browser": "projects/angular-intl-demo/src/main.ts",
54-
"polyfills": ["zone.js"],
5554
"tsConfig": "projects/angular-intl-demo/tsconfig.app.json",
5655
"inlineStyleLanguage": "scss",
5756
"assets": [

‎projects/angular-intl-demo/src/app/app.config.ts

+4-12
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,16 @@
11
import { provideHttpClient } from '@angular/common/http';
2-
import { ApplicationConfig } from '@angular/core';
32
import {
4-
MAT_FORM_FIELD_DEFAULT_OPTIONS,
5-
MatFormFieldDefaultOptions,
6-
} from '@angular/material/form-field';
7-
import { provideAnimations } from '@angular/platform-browser/animations';
3+
ApplicationConfig,
4+
provideZonelessChangeDetection,
5+
} from '@angular/core';
86
import { provideRouter, withHashLocation } from '@angular/router';
97
import { provideMarkdown } from 'ngx-markdown';
108
import { routes } from './app.routes';
119

1210
export const appConfig: ApplicationConfig = {
1311
providers: [
12+
provideZonelessChangeDetection(),
1413
provideMarkdown(),
15-
{
16-
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
17-
useValue: {
18-
subscriptSizing: 'dynamic',
19-
} satisfies MatFormFieldDefaultOptions,
20-
},
21-
provideAnimations(),
2214
provideHttpClient(),
2315
provideRouter(routes, withHashLocation()),
2416
],

‎projects/angular-intl-demo/src/app/pipes/country/country.component.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { MatOptionModule } from '@angular/material/core';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatFormField, MatLabel } from '@angular/material/form-field';
4+
import { MatOption, MatSelect } from '@angular/material/select';
65
import {
76
IntlCountryPipe,
87
IntlCountryPipeOptions,
@@ -15,11 +14,12 @@ import { countries } from './countries';
1514
templateUrl: './country.component.html',
1615
styleUrls: ['./country.component.scss'],
1716
imports: [
18-
MatFormFieldModule,
19-
MatSelectModule,
2017
FormsModule,
21-
MatOptionModule,
2218
IntlCountryPipe,
19+
MatFormField,
20+
MatSelect,
21+
MatOption,
22+
MatLabel,
2323
],
2424
})
2525
export class CountryComponent {

‎projects/angular-intl-demo/src/app/pipes/currency/currency.component.ts

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { MatOptionModule } from '@angular/material/core';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatInputModule } from '@angular/material/input';
6-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
4+
import { MatInput } from '@angular/material/input';
5+
import { MatOption, MatSelect } from '@angular/material/select';
76
import {
87
IntlCurrencyPipe,
98
IntlCurrencyPipeOptions,
@@ -16,12 +15,14 @@ import { currencies } from './currencies';
1615
templateUrl: './currency.component.html',
1716
styleUrls: ['./currency.component.scss'],
1817
imports: [
19-
MatFormFieldModule,
20-
MatInputModule,
2118
FormsModule,
22-
MatSelectModule,
23-
MatOptionModule,
2419
IntlCurrencyPipe,
20+
MatFormField,
21+
MatInput,
22+
MatSelect,
23+
MatOption,
24+
MatLabel,
25+
MatError,
2526
],
2627
})
2728
export class CurrencyComponent {

‎projects/angular-intl-demo/src/app/pipes/date/date.component.ts

+18-12
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { MatButtonModule } from '@angular/material/button';
4-
import { MatOptionModule } from '@angular/material/core';
5-
import { MatFormFieldModule } from '@angular/material/form-field';
6-
import { MatIconModule } from '@angular/material/icon';
7-
import { MatInputModule } from '@angular/material/input';
8-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatIconButton } from '@angular/material/button';
4+
import { MatOption } from '@angular/material/core';
5+
import {
6+
MatFormField,
7+
MatLabel,
8+
MatSuffix,
9+
} from '@angular/material/form-field';
10+
import { MatIcon } from '@angular/material/icon';
11+
import { MatInput } from '@angular/material/input';
12+
import { MatSelect } from '@angular/material/select';
913
import { IntlDatePipe, IntlDatePipeOptions } from 'angular-ecmascript-intl';
1014
import { languages } from '../../languages';
1115
import { getDateString } from '../date-utils';
@@ -15,14 +19,16 @@ import { getDateString } from '../date-utils';
1519
templateUrl: './date.component.html',
1620
styleUrls: ['./date.component.scss'],
1721
imports: [
18-
MatFormFieldModule,
19-
MatInputModule,
2022
FormsModule,
21-
MatButtonModule,
22-
MatIconModule,
23-
MatSelectModule,
24-
MatOptionModule,
2523
IntlDatePipe,
24+
MatFormField,
25+
MatInput,
26+
MatIconButton,
27+
MatIcon,
28+
MatSelect,
29+
MatOption,
30+
MatLabel,
31+
MatSuffix,
2632
],
2733
})
2834
export class DateComponent {

‎projects/angular-intl-demo/src/app/pipes/decimal/decimal.component.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { MatOptionModule } from '@angular/material/core';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatInputModule } from '@angular/material/input';
6-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatOption } from '@angular/material/core';
4+
import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
5+
import { MatInput } from '@angular/material/input';
6+
import { MatSelect } from '@angular/material/select';
77
import {
88
IntlDecimalPipe,
99
IntlDecimalPipeOptions,
@@ -15,12 +15,14 @@ import { languages } from '../../languages';
1515
templateUrl: './decimal.component.html',
1616
styleUrls: ['./decimal.component.scss'],
1717
imports: [
18-
MatFormFieldModule,
19-
MatInputModule,
2018
FormsModule,
21-
MatSelectModule,
22-
MatOptionModule,
2319
IntlDecimalPipe,
20+
MatFormField,
21+
MatInput,
22+
MatSelect,
23+
MatOption,
24+
MatLabel,
25+
MatError,
2426
],
2527
})
2628
export class DecimalComponent {

‎projects/angular-intl-demo/src/app/pipes/duration/duration.component.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { CommonModule } from '@angular/common';
21
import { Component, computed, signal } from '@angular/core';
32
import { FormsModule } from '@angular/forms';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatInputModule } from '@angular/material/input';
6-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatFormField, MatLabel } from '@angular/material/form-field';
4+
import { MatInput } from '@angular/material/input';
5+
import { MatOption, MatSelect } from '@angular/material/select';
76
import {
87
IntlDurationPipe,
98
IntlDurationPipeOptions,
@@ -13,12 +12,13 @@ import { languages } from '../../languages';
1312
@Component({
1413
selector: 'app-duration',
1514
imports: [
16-
CommonModule,
17-
MatFormFieldModule,
18-
MatSelectModule,
1915
IntlDurationPipe,
2016
FormsModule,
21-
MatInputModule,
17+
MatFormField,
18+
MatInput,
19+
MatSelect,
20+
MatOption,
21+
MatLabel,
2222
],
2323
templateUrl: './duration.component.html',
2424
styleUrls: ['./duration.component.scss'],

‎projects/angular-intl-demo/src/app/pipes/language/language.component.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { MatOptionModule } from '@angular/material/core';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatOption } from '@angular/material/core';
4+
import { MatFormField, MatLabel } from '@angular/material/form-field';
5+
import { MatSelect } from '@angular/material/select';
66
import {
77
IntlLanguagePipe,
88
IntlLanguagePipeOptions,
@@ -14,11 +14,12 @@ import { languages } from '../../languages';
1414
templateUrl: './language.component.html',
1515
styleUrls: ['./language.component.scss'],
1616
imports: [
17-
MatFormFieldModule,
18-
MatSelectModule,
1917
FormsModule,
20-
MatOptionModule,
2118
IntlLanguagePipe,
19+
MatFormField,
20+
MatSelect,
21+
MatOption,
22+
MatLabel,
2223
],
2324
})
2425
export class LanguageComponent {

‎projects/angular-intl-demo/src/app/pipes/list/list.component.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { MatOptionModule } from '@angular/material/core';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatOption } from '@angular/material/core';
4+
import { MatFormField, MatLabel } from '@angular/material/form-field';
5+
import { MatSelect } from '@angular/material/select';
66
import { IntlListPipe, IntlListPipeOptions } from 'angular-ecmascript-intl';
77
import { languages } from '../../languages';
88
import { list } from './list';
@@ -12,11 +12,12 @@ import { list } from './list';
1212
templateUrl: './list.component.html',
1313
styleUrls: ['./list.component.scss'],
1414
imports: [
15-
MatFormFieldModule,
16-
MatSelectModule,
1715
FormsModule,
18-
MatOptionModule,
1916
IntlListPipe,
17+
MatFormField,
18+
MatSelect,
19+
MatOption,
20+
MatLabel,
2021
],
2122
})
2223
export class ListComponent {

‎projects/angular-intl-demo/src/app/pipes/percent/percent.component.ts

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Component, computed, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { MatOptionModule } from '@angular/material/core';
4-
import { MatFormFieldModule } from '@angular/material/form-field';
5-
import { MatInputModule } from '@angular/material/input';
6-
import { MatSelectModule } from '@angular/material/select';
3+
import { MatOption } from '@angular/material/core';
4+
import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
5+
import { MatInput } from '@angular/material/input';
6+
import { MatSelect } from '@angular/material/select';
77
import {
88
IntlPercentPipe,
99
IntlPercentPipeOptions,
@@ -15,12 +15,14 @@ import { languages } from '../../languages';
1515
templateUrl: './percent.component.html',
1616
styleUrls: ['./percent.component.scss'],
1717
imports: [
18-
MatFormFieldModule,
19-
MatInputModule,
2018
FormsModule,
21-
MatSelectModule,
22-
MatOptionModule,
2319
IntlPercentPipe,
20+
MatFormField,
21+
MatInput,
22+
MatSelect,
23+
MatOption,
24+
MatLabel,
25+
MatError,
2426
],
2527
})
2628
export class PercentComponent {

‎projects/angular-intl-demo/src/app/pipes/pipes.component.html

+15-8
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,27 @@
55
mat-tab-link
66
routerLink="date"
77
routerLinkActive
8-
>Date</a
98
>
9+
Date
10+
</a>
1011
<a
1112
#decimalActive="routerLinkActive"
1213
[active]="decimalActive.isActive"
1314
mat-tab-link
1415
routerLink="decimal"
1516
routerLinkActive
16-
>Decimal</a
1717
>
18+
Decimal
19+
</a>
1820
<a
1921
#percentActive="routerLinkActive"
2022
[active]="percentActive.isActive"
2123
mat-tab-link
2224
routerLink="percent"
2325
routerLinkActive
24-
>Percent</a
2526
>
27+
Percent
28+
</a>
2629
<a
2730
#currencyActive="routerLinkActive"
2831
[active]="currencyActive.isActive"
@@ -37,8 +40,9 @@
3740
mat-tab-link
3841
routerLink="unit"
3942
routerLinkActive
40-
>Unit</a
4143
>
44+
Unit
45+
</a>
4246
<a
4347
#languageActive="routerLinkActive"
4448
[active]="languageActive.isActive"
@@ -53,16 +57,18 @@
5357
mat-tab-link
5458
routerLink="country"
5559
routerLinkActive
56-
>Country</a
5760
>
61+
Country
62+
</a>
5863
<a
5964
#listActive="routerLinkActive"
6065
[active]="listActive.isActive"
6166
mat-tab-link
6267
routerLink="list"
6368
routerLinkActive
64-
>List</a
6569
>
70+
List
71+
</a>
6672
<a
6773
#relativeTimeActive="routerLinkActive"
6874
[active]="relativeTimeActive.isActive"
@@ -77,10 +83,11 @@
7783
mat-tab-link
7884
routerLink="duration"
7985
routerLinkActive
80-
>Duration</a
8186
>
87+
Duration
88+
</a>
8289
</nav>
83-
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
90+
<mat-tab-nav-panel #tabPanel />
8491

8592
<div class="panel-container">
8693
<router-outlet />

0 commit comments

Comments
 (0)