Skip to content

Commit 9f2b390

Browse files
christopherthielenchristopherthielen
committed
Upgrade to Angular 21
- Update Angular packages from v20 to v21.0.6 - Update TypeScript to 5.9.3 - Update zone.js to 0.16.0 - Update @uirouter/angular to 17.0.1 - Update rxjs to 7.8.0 - Update tsconfig: moduleResolution to bundler, ES2022 target - Remove deprecated files: tslint.json, protractor.conf.js, karma.conf.js - Remove deprecated angular.json configs (karma test, protractor e2e) - Auto-migrated templates to block control flow syntax (@if, @for)
1 parent 408f3f7 commit 9f2b390

16 files changed

+1396
-1671
lines changed

‎angular.json‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -72,36 +72,6 @@
7272
"options": {
7373
"buildTarget": "sample-app-angular:build"
7474
}
75-
},
76-
"test": {
77-
"builder": "@angular-devkit/build-angular:karma",
78-
"options": {
79-
"main": "src/test.ts",
80-
"karmaConfig": "./karma.conf.js",
81-
"polyfills": "src/polyfills.ts",
82-
"scripts": [],
83-
"styles": [
84-
"src/styles.css"
85-
],
86-
"assets": [
87-
"src/assets",
88-
"src/favicon.ico"
89-
]
90-
}
91-
}
92-
}
93-
},
94-
"sample-app-angular-e2e": {
95-
"root": "",
96-
"sourceRoot": "",
97-
"projectType": "application",
98-
"architect": {
99-
"e2e": {
100-
"builder": "@angular-devkit/build-angular:protractor",
101-
"options": {
102-
"protractorConfig": "./protractor.conf.js",
103-
"devServerTarget": "sample-app-angular:serve"
104-
}
10575
}
10676
}
10777
}

‎karma.conf.js‎

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎package.json‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,6 @@
22
"name": "sample-app-angular",
33
"version": "0.0.0",
44
"license": "MIT",
5-
"angular-cli": {},
6-
"checkPeerDependencies": {
7-
"ignore": [
8-
"ajv",
9-
"postcss",
10-
"terser"
11-
]
12-
},
135
"scripts": {
146
"ng": "ng",
157
"start": "ng serve --configuration production",
@@ -21,28 +13,27 @@
2113
},
2214
"private": true,
2315
"dependencies": {
24-
"@angular/common": "^20.0.0",
25-
"@angular/compiler": "^20.0.0",
26-
"@angular/core": "^20.0.0",
27-
"@angular/forms": "^20.0.0",
28-
"@angular/platform-browser": "^20.0.0",
29-
"@angular/platform-browser-dynamic": "^20.0.0",
30-
"@uirouter/angular": "^14.0.0",
31-
"@uirouter/core": "6.1.0",
32-
"@uirouter/rx": "1.0.0",
16+
"@angular/common": "^21.0.6",
17+
"@angular/compiler": "^21.0.6",
18+
"@angular/core": "^21.0.6",
19+
"@angular/forms": "^21.0.6",
20+
"@angular/platform-browser": "^21.0.6",
21+
"@angular/platform-browser-dynamic": "^21.0.6",
22+
"@uirouter/angular": "^17.0.1",
23+
"@uirouter/core": "^6.1.2",
24+
"@uirouter/rx": "^1.0.0",
3325
"@uirouter/visualizer": "^7.2.1",
34-
"rxjs": "^7.4.0",
35-
"zone.js": "~0.15.0"
26+
"rxjs": "^7.8.0",
27+
"zone.js": "~0.16.0"
3628
},
3729
"devDependencies": {
38-
"@angular-devkit/build-angular": "^20.0.0",
39-
"@angular/animations": "^20.0.0",
40-
"@angular/cli": "^20.0.0",
41-
"@angular/compiler-cli": "^20.0.0",
42-
"@types/jasmine": "~3.10.2",
30+
"@angular-devkit/build-angular": "^21.0.4",
31+
"@angular/animations": "^21.0.6",
32+
"@angular/cli": "^21.0.4",
33+
"@angular/compiler-cli": "^21.0.6",
34+
"@types/jasmine": "~5.1.0",
4335
"@uirouter/cypress-runner": "^3.0.0",
44-
"tslint": "6.1.3",
45-
"typescript": "~5.8.0"
36+
"typescript": "~5.9.3"
4637
},
4738
"packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
4839
}

‎protractor.conf.js‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/app/app.component.ts‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,33 +16,31 @@ import { AppConfigService } from './global/app-config.service';
1616
template: `
1717
<div #dialogdiv></div>
1818
<div class="navheader">
19-
<ul *ngIf="isAuthenticated" class="nav nav-tabs">
20-
21-
<li uiSrefActive="active"> <a uiSref="mymessages" role="button"> Messages </a> </li>
22-
<li uiSrefActive="active"> <a uiSref="contacts" role="button"> Contacts </a> </li>
23-
<li uiSrefActive="active"> <a uiSref="prefs" role="button"> Preferences </a> </li>
24-
25-
<li class="navbar-right">
26-
<button class="btn btn-primary fa fa-home" uiSref="home"></button>
27-
<button style="margin-right: 15px;" class="btn btn-primary" uiSref="mymessages.compose">
28-
<i class="fa fa-envelope"></i> New Message
29-
</button>
30-
</li>
31-
32-
<li class="navbar-text navbar-right logged-in-user" style="margin: 0.5em 1.5em;">
33-
<div>
34-
{{emailAddress}} <i class="fa fa-chevron-down"></i>
35-
<div class="hoverdrop">
36-
<button class="btn btn-primary" (click)="logout()">Log Out</button>
19+
@if (isAuthenticated) {
20+
<ul class="nav nav-tabs">
21+
<li uiSrefActive="active"> <a uiSref="mymessages" role="button"> Messages </a> </li>
22+
<li uiSrefActive="active"> <a uiSref="contacts" role="button"> Contacts </a> </li>
23+
<li uiSrefActive="active"> <a uiSref="prefs" role="button"> Preferences </a> </li>
24+
<li class="navbar-right">
25+
<button class="btn btn-primary fa fa-home" uiSref="home"></button>
26+
<button style="margin-right: 15px;" class="btn btn-primary" uiSref="mymessages.compose">
27+
<i class="fa fa-envelope"></i> New Message
28+
</button>
29+
</li>
30+
<li class="navbar-text navbar-right logged-in-user" style="margin: 0.5em 1.5em;">
31+
<div>
32+
{{emailAddress}} <i class="fa fa-chevron-down"></i>
33+
<div class="hoverdrop">
34+
<button class="btn btn-primary" (click)="logout()">Log Out</button>
35+
</div>
3736
</div>
38-
</div>
39-
</li>
40-
41-
</ul>
37+
</li>
38+
</ul>
39+
}
4240
</div>
43-
41+
4442
<ui-view></ui-view>
45-
`,
43+
`,
4644
styles: [],
4745
standalone: false
4846
})

‎src/app/contacts/contact-list.component.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,21 @@ import { Component, Input } from '@angular/core';
1818
</button>
1919
</a>
2020
</li>
21-
21+
2222
<li>&nbsp;</li>
23-
23+
2424
<!-- Highlight the selected contact:
25-
When the current state matches the ui-sref's state (and its parameters)
26-
ui-sref-active applies the 'selected' class to the li element -->
27-
<li *ngFor="let contact of contacts" >
28-
<a uiSref=".contact" [uiParams]="{contactId: contact._id}" uiSrefActive="selected">
29-
{{contact.name.first}} {{contact.name.last}}
30-
</a>
31-
</li>
25+
When the current state matches the ui-sref's state (and its parameters)
26+
ui-sref-active applies the 'selected' class to the li element -->
27+
@for (contact of contacts; track contact) {
28+
<li >
29+
<a uiSref=".contact" [uiParams]="{contactId: contact._id}" uiSrefActive="selected">
30+
{{contact.name.first}} {{contact.name.last}}
31+
</a>
32+
</li>
33+
}
3234
</ul>
33-
`,
35+
`,
3436
styles: [],
3537
standalone: false
3638
})

‎src/app/global/dialog.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,18 @@ import { wait } from '../util/util';
77
<div class="backdrop" [class.active]="visible"></div>
88
<div class='wrapper'>
99
<div class="content">
10-
<h4 *ngIf="message">{{message}}</h4>
10+
@if (message) {
11+
<h4>{{message}}</h4>
12+
}
1113
<div [hidden]="!details">{{details}}</div>
12-
14+
1315
<div style="padding-top: 1em;">
1416
<button class="btn btn-primary" (click)="yes()">{{yesMsg}}</button>
1517
<button class="btn btn-primary" (click)="no()">{{noMsg}}</button>
1618
</div>
1719
</div>
1820
</div>
19-
`,
21+
`,
2022
styles: [],
2123
standalone: false
2224
})

‎src/app/login.component.ts‎

Lines changed: 42 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,53 @@ import { AppConfigService } from './global/app-config.service';
1616
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
1717
<h3>Log In</h3>
1818
<p>
19-
(This login screen is for demonstration only...
19+
(This login screen is for demonstration only...
2020
just pick a username, enter 'password' and click <b>"Log in"</b>)</p>
21-
<hr>
21+
<hr>
2222
23-
<div>
24-
<label for="username">Username:</label>
25-
<select class="form-control" name="username" id="username" [(ngModel)]="credentials.username">
26-
<option *ngFor="let username of usernames" [value]="username">{{username}}</option>
27-
</select>
28-
29-
<i style="position: relative; bottom: 1.8em; margin-left: 10em; height: 0"
30-
*ngIf="!credentials.username" class="fa fa-arrow-left bounce-horizontal"> Choose </i>
31-
</div>
32-
<br>
23+
<div>
24+
<label for="username">Username:</label>
25+
<select class="form-control" name="username" id="username" [(ngModel)]="credentials.username">
26+
@for (username of usernames; track username) {
27+
<option [value]="username">{{username}}</option>
28+
}
29+
</select>
3330
34-
<div>
35-
<label for="password">Password:</label>
36-
<input class="form-control" type="password" name="password" [(ngModel)]="credentials.password">
37-
<i style="position: relative; bottom: 1.8em; margin-left: 5em; height: 0"
38-
*ngIf="credentials.username && credentials.password !== 'password'" class="fa fa-arrow-left bounce-horizontal">
39-
Enter '<b>password</b>' here
40-
</i>
41-
</div>
31+
@if (!credentials.username) {
32+
<i style="position: relative; bottom: 1.8em; margin-left: 10em; height: 0"
33+
class="fa fa-arrow-left bounce-horizontal"> Choose </i>
34+
}
35+
</div>
36+
<br>
4237
43-
<div [hidden]="!errorMessage" class="well error">{{ errorMessage }}</div>
38+
<div>
39+
<label for="password">Password:</label>
40+
<input class="form-control" type="password" name="password" [(ngModel)]="credentials.password">
41+
@if (credentials.username && credentials.password !== 'password') {
42+
<i style="position: relative; bottom: 1.8em; margin-left: 5em; height: 0"
43+
class="fa fa-arrow-left bounce-horizontal">
44+
Enter '<b>password</b>' here
45+
</i>
46+
}
47+
</div>
4448
45-
<hr>
46-
<div>
47-
<button class="btn btn-primary" type="button" [disabled]="authenticating" (click)="login(credentials)">
48-
<i class="fa fa-spin fa-spinner" *ngIf="authenticating"></i> <span>Log in</span>
49-
</button>
50-
<i *ngIf="credentials.username || credentials.password !== 'password'"
51-
style="position: relative;" class="fa fa-arrow-left bounce-horizontal"> Click Me!</i>
52-
</div>
53-
</div>
54-
</div>
55-
`,
49+
<div [hidden]="!errorMessage" class="well error">{{ errorMessage }}</div>
50+
51+
<hr>
52+
<div>
53+
<button class="btn btn-primary" type="button" [disabled]="authenticating" (click)="login(credentials)">
54+
@if (authenticating) {
55+
<i class="fa fa-spin fa-spinner"></i>
56+
} <span>Log in</span>
57+
</button>
58+
@if (credentials.username || credentials.password !== 'password') {
59+
<i
60+
style="position: relative;" class="fa fa-arrow-left bounce-horizontal"> Click Me!</i>
61+
}
62+
</div>
63+
</div>
64+
</div>
65+
`,
5666
styles: [],
5767
standalone: false
5868
})

‎src/app/mymessages/folder-list.component.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,18 @@ import { Component, Input } from '@angular/core';
1010
<div class="folderlist">
1111
<ul class="selectlist list-unstyled">
1212
<!-- Highlight the selected folder:
13-
When the current state matches the uiSref's state (and its parameters)
14-
uiSrefActive applies the 'selected' class to the li element -->
15-
<li class="folder" uiSrefActive="selected" *ngFor="let folder of folders">
16-
<!-- This uiSref is a relative link to the 'mymessages.messagelist' substate. It provides the
17-
'folderId' parameter value from the current folder's .id property -->
18-
<a uiSref=".messagelist" [uiParams]="{ folderId: folder._id }"><i class="fa"></i>{{ folder._id }}</a>
19-
</li>
13+
When the current state matches the uiSref's state (and its parameters)
14+
uiSrefActive applies the 'selected' class to the li element -->
15+
@for (folder of folders; track folder) {
16+
<li class="folder" uiSrefActive="selected">
17+
<!-- This uiSref is a relative link to the 'mymessages.messagelist' substate. It provides the
18+
'folderId' parameter value from the current folder's .id property -->
19+
<a uiSref=".messagelist" [uiParams]="{ folderId: folder._id }"><i class="fa"></i>{{ folder._id }}</a>
20+
</li>
21+
}
2022
</ul>
2123
</div>
22-
`,
24+
`,
2325
styles: [],
2426
standalone: false
2527
})

0 commit comments

Comments
 (0)