Skip to content

Upgrade to Angular 21 #796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
christopherthielen merged 1 commit into from
Jan 2, 2026
Merged

Upgrade to Angular 21 #796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 0 additions & 30 deletions angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,36 +72,6 @@
"options": {
"buildTarget": "sample-app-angular:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"scripts": [],
"styles": [
"src/styles.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
}
}
},
"sample-app-angular-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "sample-app-angular:serve"
}
}
}
}
Expand Down
43 changes: 0 additions & 43 deletions karma.conf.js
View file
Open in desktop

This file was deleted.

43 changes: 17 additions & 26 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,6 @@
"name": "sample-app-angular",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"checkPeerDependencies": {
"ignore": [
"ajv",
"postcss",
"terser"
]
},
"scripts": {
"ng": "ng",
"start": "ng serve --configuration production",
Expand All @@ -21,28 +13,27 @@
},
"private": true,
"dependencies": {
"@angular/common": "^20.0.0",
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/forms": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@uirouter/angular": "^14.0.0",
"@uirouter/core": "6.1.0",
"@uirouter/rx": "1.0.0",
"@angular/common": "^21.0.6",
"@angular/compiler": "^21.0.6",
"@angular/core": "^21.0.6",
"@angular/forms": "^21.0.6",
"@angular/platform-browser": "^21.0.6",
"@angular/platform-browser-dynamic": "^21.0.6",
"@uirouter/angular": "^17.0.1",
"@uirouter/core": "^6.1.2",
"@uirouter/rx": "^1.0.0",
"@uirouter/visualizer": "^7.2.1",
"rxjs": "^7.4.0",
"zone.js": "~0.15.0"
"rxjs": "^7.8.0",
"zone.js": "~0.16.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^20.0.0",
"@angular/animations": "^20.0.0",
"@angular/cli": "^20.0.0",
"@angular/compiler-cli": "^20.0.0",
"@types/jasmine": "~3.10.2",
"@angular-devkit/build-angular": "^21.0.4",
"@angular/animations": "^21.0.6",
"@angular/cli": "^21.0.4",
"@angular/compiler-cli": "^21.0.6",
"@types/jasmine": "~5.1.0",
"@uirouter/cypress-runner": "^3.0.0",
"tslint": "6.1.3",
"typescript": "~5.8.0"
"typescript": "~5.9.3"
},
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
}
32 changes: 0 additions & 32 deletions protractor.conf.js
View file
Open in desktop

This file was deleted.

46 changes: 22 additions & 24 deletions src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,31 @@ import { AppConfigService } from './global/app-config.service';
template: `
<div #dialogdiv></div>
<div class="navheader">
<ul *ngIf="isAuthenticated" class="nav nav-tabs">

<li uiSrefActive="active"> <a uiSref="mymessages" role="button"> Messages </a> </li>
<li uiSrefActive="active"> <a uiSref="contacts" role="button"> Contacts </a> </li>
<li uiSrefActive="active"> <a uiSref="prefs" role="button"> Preferences </a> </li>

<li class="navbar-right">
<button class="btn btn-primary fa fa-home" uiSref="home"></button>
<button style="margin-right: 15px;" class="btn btn-primary" uiSref="mymessages.compose">
<i class="fa fa-envelope"></i> New Message
</button>
</li>

<li class="navbar-text navbar-right logged-in-user" style="margin: 0.5em 1.5em;">
<div>
{{emailAddress}} <i class="fa fa-chevron-down"></i>
<div class="hoverdrop">
<button class="btn btn-primary" (click)="logout()">Log Out</button>
@if (isAuthenticated) {
<ul class="nav nav-tabs">
<li uiSrefActive="active"> <a uiSref="mymessages" role="button"> Messages </a> </li>
<li uiSrefActive="active"> <a uiSref="contacts" role="button"> Contacts </a> </li>
<li uiSrefActive="active"> <a uiSref="prefs" role="button"> Preferences </a> </li>
<li class="navbar-right">
<button class="btn btn-primary fa fa-home" uiSref="home"></button>
<button style="margin-right: 15px;" class="btn btn-primary" uiSref="mymessages.compose">
<i class="fa fa-envelope"></i> New Message
</button>
</li>
<li class="navbar-text navbar-right logged-in-user" style="margin: 0.5em 1.5em;">
<div>
{{emailAddress}} <i class="fa fa-chevron-down"></i>
<div class="hoverdrop">
<button class="btn btn-primary" (click)="logout()">Log Out</button>
</div>
</div>
</div>
</li>

</ul>
</li>
</ul>
}
</div>

<ui-view></ui-view>
`,
`,
styles: [],
standalone: false
})
Expand Down
22 changes: 12 additions & 10 deletions src/app/contacts/contact-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,21 @@ import { Component, Input } from '@angular/core';
</button>
</a>
</li>

<li>&nbsp;</li>

<!-- Highlight the selected contact:
When the current state matches the ui-sref's state (and its parameters)
ui-sref-active applies the 'selected' class to the li element -->
<li *ngFor="let contact of contacts" >
<a uiSref=".contact" [uiParams]="{contactId: contact._id}" uiSrefActive="selected">
{{contact.name.first}} {{contact.name.last}}
</a>
</li>
When the current state matches the ui-sref's state (and its parameters)
ui-sref-active applies the 'selected' class to the li element -->
@for (contact of contacts; track contact) {
<li >
<a uiSref=".contact" [uiParams]="{contactId: contact._id}" uiSrefActive="selected">
{{contact.name.first}} {{contact.name.last}}
</a>
</li>
}
</ul>
`,
`,
styles: [],
standalone: false
})
Expand Down
8 changes: 5 additions & 3 deletions src/app/global/dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,18 @@ import { wait } from '../util/util';
<div class="backdrop" [class.active]="visible"></div>
<div class='wrapper'>
<div class="content">
<h4 *ngIf="message">{{message}}</h4>
@if (message) {
<h4>{{message}}</h4>
}
<div [hidden]="!details">{{details}}</div>

<div style="padding-top: 1em;">
<button class="btn btn-primary" (click)="yes()">{{yesMsg}}</button>
<button class="btn btn-primary" (click)="no()">{{noMsg}}</button>
</div>
</div>
</div>
`,
`,
styles: [],
standalone: false
})
Expand Down
74 changes: 42 additions & 32 deletions src/app/login.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,53 @@ import { AppConfigService } from './global/app-config.service';
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<h3>Log In</h3>
<p>
(This login screen is for demonstration only...
(This login screen is for demonstration only...
just pick a username, enter 'password' and click <b>"Log in"</b>)</p>
<hr>
<hr>

<div>
<label for="username">Username:</label>
<select class="form-control" name="username" id="username" [(ngModel)]="credentials.username">
<option *ngFor="let username of usernames" [value]="username">{{username}}</option>
</select>

<i style="position: relative; bottom: 1.8em; margin-left: 10em; height: 0"
*ngIf="!credentials.username" class="fa fa-arrow-left bounce-horizontal"> Choose </i>
</div>
<br>
<div>
<label for="username">Username:</label>
<select class="form-control" name="username" id="username" [(ngModel)]="credentials.username">
@for (username of usernames; track username) {
<option [value]="username">{{username}}</option>
}
</select>

<div>
<label for="password">Password:</label>
<input class="form-control" type="password" name="password" [(ngModel)]="credentials.password">
<i style="position: relative; bottom: 1.8em; margin-left: 5em; height: 0"
*ngIf="credentials.username && credentials.password !== 'password'" class="fa fa-arrow-left bounce-horizontal">
Enter '<b>password</b>' here
</i>
</div>
@if (!credentials.username) {
<i style="position: relative; bottom: 1.8em; margin-left: 10em; height: 0"
class="fa fa-arrow-left bounce-horizontal"> Choose </i>
}
</div>
<br>

<div [hidden]="!errorMessage" class="well error">{{ errorMessage }}</div>
<div>
<label for="password">Password:</label>
<input class="form-control" type="password" name="password" [(ngModel)]="credentials.password">
@if (credentials.username && credentials.password !== 'password') {
<i style="position: relative; bottom: 1.8em; margin-left: 5em; height: 0"
class="fa fa-arrow-left bounce-horizontal">
Enter '<b>password</b>' here
</i>
}
</div>

<hr>
<div>
<button class="btn btn-primary" type="button" [disabled]="authenticating" (click)="login(credentials)">
<i class="fa fa-spin fa-spinner" *ngIf="authenticating"></i> <span>Log in</span>
</button>
<i *ngIf="credentials.username || credentials.password !== 'password'"
style="position: relative;" class="fa fa-arrow-left bounce-horizontal"> Click Me!</i>
</div>
</div>
</div>
`,
<div [hidden]="!errorMessage" class="well error">{{ errorMessage }}</div>

<hr>
<div>
<button class="btn btn-primary" type="button" [disabled]="authenticating" (click)="login(credentials)">
@if (authenticating) {
<i class="fa fa-spin fa-spinner"></i>
} <span>Log in</span>
</button>
@if (credentials.username || credentials.password !== 'password') {
<i
style="position: relative;" class="fa fa-arrow-left bounce-horizontal"> Click Me!</i>
}
</div>
</div>
</div>
`,
styles: [],
standalone: false
})
Expand Down
18 changes: 10 additions & 8 deletions src/app/mymessages/folder-list.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,18 @@ import { Component, Input } from '@angular/core';
<div class="folderlist">
<ul class="selectlist list-unstyled">
<!-- Highlight the selected folder:
When the current state matches the uiSref's state (and its parameters)
uiSrefActive applies the 'selected' class to the li element -->
<li class="folder" uiSrefActive="selected" *ngFor="let folder of folders">
<!-- This uiSref is a relative link to the 'mymessages.messagelist' substate. It provides the
'folderId' parameter value from the current folder's .id property -->
<a uiSref=".messagelist" [uiParams]="{ folderId: folder._id }"><i class="fa"></i>{{ folder._id }}</a>
</li>
When the current state matches the uiSref's state (and its parameters)
uiSrefActive applies the 'selected' class to the li element -->
@for (folder of folders; track folder) {
<li class="folder" uiSrefActive="selected">
<!-- This uiSref is a relative link to the 'mymessages.messagelist' substate. It provides the
'folderId' parameter value from the current folder's .id property -->
<a uiSref=".messagelist" [uiParams]="{ folderId: folder._id }"><i class="fa"></i>{{ folder._id }}</a>
</li>
}
</ul>
</div>
`,
`,
styles: [],
standalone: false
})
Expand Down
Loading