Skip to content

Commit 8531674

Browse files
json-derulojson-derulo
committed
feat!: update to Angular 20
BREAKING CHANGE: Minimum required Angular version is v20
1 parent 41c59c5 commit 8531674

File tree

8 files changed

+1769
-1339
lines changed

8 files changed

+1769
-1339
lines changed

‎angular.json

+26
Original file line numberDiff line numberDiff line change
@@ -137,5 +137,31 @@
137137
"enabled": true
138138
},
139139
"schematicCollections": ["@angular-eslint/schematics"]
140+
},
141+
"schematics": {
142+
"@schematics/angular:component": {
143+
"type": "component"
144+
},
145+
"@schematics/angular:directive": {
146+
"type": "directive"
147+
},
148+
"@schematics/angular:service": {
149+
"type": "service"
150+
},
151+
"@schematics/angular:guard": {
152+
"typeSeparator": "."
153+
},
154+
"@schematics/angular:interceptor": {
155+
"typeSeparator": "."
156+
},
157+
"@schematics/angular:module": {
158+
"typeSeparator": "."
159+
},
160+
"@schematics/angular:pipe": {
161+
"typeSeparator": "."
162+
},
163+
"@schematics/angular:resolver": {
164+
"typeSeparator": "."
165+
}
140166
}
141167
}

‎package.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,16 @@
3232
"prettier-fix": "prettier . --write"
3333
},
3434
"dependencies": {
35-
"@angular/animations": "^19.2.3",
36-
"@angular/cdk": "^19.2.6",
37-
"@angular/common": "^19.2.3",
38-
"@angular/compiler": "^19.2.3",
39-
"@angular/core": "^19.2.3",
40-
"@angular/forms": "^19.2.3",
41-
"@angular/material": "^19.2.6",
42-
"@angular/platform-browser": "^19.2.3",
43-
"@angular/platform-browser-dynamic": "^19.2.3",
44-
"@angular/router": "^19.2.3",
35+
"@angular/animations": "^20.0.0-rc.0",
36+
"@angular/cdk": "^20.0.0-rc.0",
37+
"@angular/common": "^20.0.0-rc.0",
38+
"@angular/compiler": "^20.0.0-rc.0",
39+
"@angular/core": "^20.0.0-rc.0",
40+
"@angular/forms": "^20.0.0-rc.0",
41+
"@angular/material": "^20.0.0-rc.0",
42+
"@angular/platform-browser": "^20.0.0-rc.0",
43+
"@angular/platform-browser-dynamic": "^20.0.0-rc.0",
44+
"@angular/router": "^20.0.0-rc.0",
4545
"@ctrl/tinycolor": "^4.0.0",
4646
"@types/node": "^22.13.14",
4747
"ngx-color-picker": "^19.0.0",
@@ -50,10 +50,10 @@
5050
"zone.js": "~0.15.0"
5151
},
5252
"devDependencies": {
53-
"@angular-devkit/build-angular": "^19.2.4",
54-
"@angular/cli": "^19.2.4",
55-
"@angular/compiler-cli": "^19.2.3",
56-
"@angular/language-service": "^19.2.3",
53+
"@angular-devkit/build-angular": "^20.0.0-rc.0",
54+
"@angular/cli": "^20.0.0-rc.0",
55+
"@angular/compiler-cli": "^20.0.0-rc.0",
56+
"@angular/language-service": "^20.0.0-rc.0",
5757
"@types/jasmine": "^5.1.1",
5858
"angular-eslint": "^19.0.0",
5959
"copyfiles": "^2.1.1",
@@ -67,7 +67,7 @@
6767
"karma-jasmine": "~5.1.0",
6868
"karma-jasmine-html-reporter": "^2.0.0",
6969
"karma-safarinative-launcher": "^1.1.0",
70-
"ng-packagr": "^19.0.0",
70+
"ng-packagr": "^20.0.0-rc.0",
7171
"npm-run-all": "^4.1.5",
7272
"prettier": "^3.0.0",
7373
"typescript": "~5.8.2",

‎pnpm-lock.yaml

+1,678-1,257
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎projects/material-css-vars/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@
2525
"angular-material"
2626
],
2727
"peerDependencies": {
28-
"@angular/common": ">=19",
29-
"@angular/core": ">=19",
30-
"@angular/material": ">=19"
28+
"@angular/common": ">=20",
29+
"@angular/core": ">=20",
30+
"@angular/material": ">=20"
3131
},
3232
"dependencies": {
3333
"@ctrl/tinycolor": "^4.0.0",

‎projects/material-css-vars/src/lib/material-css-vars.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Renderer2,
55
RendererFactory2,
66
RendererStyleFlags2,
7+
DOCUMENT,
78
} from "@angular/core";
89
import { Numberify, RGBA, TinyColor } from "@ctrl/tinycolor";
910
import {
@@ -14,7 +15,6 @@ import {
1415
MaterialCssVariables,
1516
MaterialCssVariablesConfig,
1617
} from "./model";
17-
import { DOCUMENT } from "@angular/common";
1818
import { DEFAULT_MAT_CSS_CFG } from "./default-cfg.const";
1919
import { MATERIAL_CSS_VARS_CFG } from "../mat-css-config-token.const";
2020

‎src/app/app.component.html

+44-53
Original file line numberDiff line numberDiff line change
@@ -95,12 +95,11 @@ <h2>Contrast Color</h2>
9595
materialCssVarsService.contrastColorThresholdPrimary
9696
"
9797
>
98-
<mat-option
99-
*ngFor="let hue of hues; trackBy: trackByHue"
100-
[value]="hue.value"
101-
>
102-
{{ hue.viewValue }}
103-
</mat-option>
98+
@for (hue of hues; track hue.value) {
99+
<mat-option [value]="hue.value">
100+
{{ hue.viewValue }}
101+
</mat-option>
102+
}
104103
</mat-select>
105104
</mat-form-field>
106105
<br />
@@ -114,12 +113,11 @@ <h2>Contrast Color</h2>
114113
materialCssVarsService.contrastColorThresholdAccent
115114
"
116115
>
117-
<mat-option
118-
*ngFor="let hue of hues; trackBy: trackByHue"
119-
[value]="hue.value"
120-
>
121-
{{ hue.viewValue }}
122-
</mat-option>
116+
@for (hue of hues; track hue.value) {
117+
<mat-option [value]="hue.value">
118+
{{ hue.viewValue }}
119+
</mat-option>
120+
}
123121
</mat-select>
124122
</mat-form-field>
125123
<br />
@@ -131,12 +129,11 @@ <h2>Contrast Color</h2>
131129
[disabled]="materialCssVarsService.isAutoContrast"
132130
[(ngModel)]="materialCssVarsService.contrastColorThresholdWarn"
133131
>
134-
<mat-option
135-
*ngFor="let hue of hues; trackBy: trackByHue"
136-
[value]="hue.value"
137-
>
138-
{{ hue.viewValue }}
139-
</mat-option>
132+
@for (hue of hues; track hue.value) {
133+
<mat-option [value]="hue.value">
134+
{{ hue.viewValue }}
135+
</mat-option>
136+
}
140137
</mat-select>
141138
</mat-form-field>
142139
</mat-card-content>
@@ -489,20 +486,17 @@ <h2>Material Checkbox</h2>
489486
</span>
490487
<span class="checkbox-list-section">
491488
<ul>
492-
<li
493-
*ngFor="
494-
let subtask of task.subtasks;
495-
trackBy: trackByTask
496-
"
497-
>
498-
<mat-checkbox
499-
[(ngModel)]="subtask.completed"
500-
[color]="subtask.color"
501-
(ngModelChange)="updateCompletionState()"
502-
>
503-
{{ subtask.name }}
504-
</mat-checkbox>
505-
</li>
489+
@for (subtask of task.subtasks; track subtask.name) {
490+
<li>
491+
<mat-checkbox
492+
[(ngModel)]="subtask.completed"
493+
[color]="subtask.color"
494+
(ngModelChange)="updateCompletionState()"
495+
>
496+
{{ subtask.name }}
497+
</mat-checkbox>
498+
</li>
499+
}
506500
</ul>
507501
</span>
508502
</section>
@@ -558,17 +552,16 @@ <h2>Progress spinner configuration</h2>
558552
</mat-radio-group>
559553
</section>
560554

561-
<section
562-
*ngIf="spinnerMode === 'determinate'"
563-
class="example-section"
564-
>
565-
<label class="example-margin" for="spinner-progress">
566-
Progress:
567-
</label>
568-
<mat-slider class="example-margin" id="spinner-progress">
569-
<input matSliderThumb [(ngModel)]="spinnerValue" />
570-
</mat-slider>
571-
</section>
555+
@if (spinnerMode === "determinate") {
556+
<section class="example-section">
557+
<label class="example-margin" for="spinner-progress">
558+
Progress:
559+
</label>
560+
<mat-slider class="example-margin" id="spinner-progress">
561+
<input matSliderThumb [(ngModel)]="spinnerValue" />
562+
</mat-slider>
563+
</section>
564+
}
572565
</mat-card-content>
573566
</mat-card>
574567

@@ -622,16 +615,14 @@ <h2>Material Progress Bar</h2>
622615
<mat-card-content>
623616
<h2>Material Chips</h2>
624617
<mat-chip-listbox>
625-
<mat-chip-option
626-
*ngFor="
627-
let chipColor of availableSpinnerColors;
628-
trackBy: trackBySpinnerColor
629-
"
630-
[color]="chipColor.color"
631-
selected="true"
632-
>
633-
{{ chipColor.name }}
634-
</mat-chip-option>
618+
@for (
619+
chipColor of availableSpinnerColors;
620+
track chipColor.name
621+
) {
622+
<mat-chip-option [color]="chipColor.color" selected="true">
623+
{{ chipColor.name }}
624+
</mat-chip-option>
625+
}
635626
<mat-chip-option disabled>Disabled</mat-chip-option>
636627
</mat-chip-listbox>
637628
</mat-card-content>

‎src/app/app.component.ts

+1-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, TrackByFunction } from "@angular/core";
1+
import { Component } from "@angular/core";
22
import {
33
ThemePalette,
44
MatOptionModule,
@@ -26,7 +26,6 @@ import { MatInputModule } from "@angular/material/input";
2626
import { MatIconModule } from "@angular/material/icon";
2727
import { MatButtonModule } from "@angular/material/button";
2828
import { MatTabsModule } from "@angular/material/tabs";
29-
import { NgFor, NgIf } from "@angular/common";
3029
import { FormsModule } from "@angular/forms";
3130
import { MatSelectModule } from "@angular/material/select";
3231
import { MatFormFieldModule } from "@angular/material/form-field";
@@ -66,15 +65,13 @@ interface SpinnerColor {
6665
MatFormFieldModule,
6766
MatSelectModule,
6867
FormsModule,
69-
NgFor,
7068
MatOptionModule,
7169
MatTabsModule,
7270
MatButtonModule,
7371
MatIconModule,
7472
MatInputModule,
7573
MatCheckboxModule,
7674
MatRadioModule,
77-
NgIf,
7875
MatSliderModule,
7976
MatProgressSpinnerModule,
8077
MatProgressBarModule,
@@ -223,9 +220,4 @@ export class AppComponent {
223220
}
224221
this.task.subtasks.forEach((t) => (t.completed = completed));
225222
}
226-
227-
trackByHue: TrackByFunction<Hue> = (index, hue) => hue.value;
228-
trackByTask: TrackByFunction<Task> = (index, task) => task.name;
229-
trackBySpinnerColor: TrackByFunction<SpinnerColor> = (index, color) =>
230-
color.name;
231223
}

‎tsconfig.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"declaration": false,
99
"experimentalDecorators": true,
1010
"module": "esnext",
11-
"moduleResolution": "node",
11+
"moduleResolution": "bundler",
1212
"importHelpers": true,
1313
"target": "ES2022",
1414
"strict": true,

0 commit comments

Comments
 (0)