Skip to content

Commit 81acdea

Browse files
ArnaudFlaeschArnaudFlaesch
committed
feature: Angular v.21 update
1 parent 9d905e3 commit 81acdea

11 files changed

Lines changed: 85 additions & 66 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,9 @@ Note that `keycloak-js` is a peer dependency of `keycloak-angular`. This allows
5252

5353
| Angular | keycloak-js | keycloak-angular | Support |
5454
| :-----: | :---------: | :--------------: | :-----------------: |
55-
| 20.x | 18 - 26 | 20.x.x | New Features / Bugs |
56-
| 19.x | 18 - 26 | 19.x.x | Bugs |
55+
| 21.x | 18 - 26 | 21.x.x | New Features / Bugs |
56+
| 20.x | 18 - 26 | 20.x.x | Bugs |
57+
| 19.x | 18 - 26 | 19.x.x | - |
5758
| 18.x | 18 - 26 | 16.x.x | - |
5859
| 17.x | 18 - 25 | 15.x.x | - |
5960
| 16.x | 18 - 25 | 14.x.x | - |

‎docs/features.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ This feature is particularly useful because the authorization token is not autom
2424

2525
The `withAutoRefreshToken` feature accepts the following options:
2626

27-
| Option | Type | Default | Description |
28-
| --------------------- | ----------------------------------- | ---------- | ------------------------------------------------------------------------------------------- |
29-
| `sessionTimeout` | `number` | `300000` | The duration of inactivity (in milliseconds) after which the session is considered expired. |
30-
| `onInactivityTimeout` | `'login'` \| `'logout'` \| `'none'` | `'logout'` | Action to take when the session times out due to inactivity. |
31-
| `logoutOptions` | `KeycloakLogoutOptions` | `undefined` | Logout options to pass to keycloak.logout when the user is getting logged out automatically after inactivity. |
32-
| `loginOptions` | `KeycloakLoginOptions` | `undefined` | Login options to pass to keycloak.login when the user is getting logged in automatically after inactivity. |
27+
| Option | Type | Default | Description |
28+
| --------------------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
29+
| `sessionTimeout` | `number` | `300000` | The duration of inactivity (in milliseconds) after which the session is considered expired. |
30+
| `onInactivityTimeout` | `'login'` \| `'logout'` \| `'none'` | `'logout'` | Action to take when the session times out due to inactivity. |
31+
| `logoutOptions` | `KeycloakLogoutOptions` | `undefined` | Logout options to pass to keycloak.logout when the user is getting logged out automatically after inactivity. |
32+
| `loginOptions` | `KeycloakLoginOptions` | `undefined` | Login options to pass to keycloak.login when the user is getting logged in automatically after inactivity. |
3333

3434
- **`onInactivityTimeout` Actions**:
3535
- `'login'`: Executes `keycloak.login()`.

‎docs/provide.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,12 @@ export type ProvideKeycloakOptions = {
4747

4848
- **`config`**:
4949
Keycloak server configuration, including:
50-
5150
- `url`: Keycloak server URL.
5251
- `realm`: The realm to authenticate against.
5352
- `clientId`: The client ID for your application.
5453

5554
- **`initOptions`**:
5655
Initialization options for the Keycloak instance, such as:
57-
5856
- `onLoad`: Determines whether to check SSO or require login (`'check-sso'` or `'login-required'`).
5957
- `silentCheckSsoRedirectUri`: URL for the iframe used in silent SSO.
6058

‎package.json‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "keycloak-angular",
3-
"version": "20.0.0",
3+
"version": "21.0.0",
44
"description": "Easy Keycloak integration for Angular applications.",
55
"scripts": {
66
"build": "ng build keycloak-angular --configuration production",
@@ -39,16 +39,16 @@
3939
"keycloak-js"
4040
],
4141
"dependencies": {
42-
"@angular/animations": "^20.0.2",
43-
"@angular/common": "^20.0.2",
44-
"@angular/compiler": "^20.0.2",
45-
"@angular/core": "^20.0.2",
46-
"@angular/forms": "^20.0.2",
47-
"@angular/platform-browser": "^20.0.2",
48-
"@angular/platform-browser-dynamic": "^20.0.2",
49-
"@angular/platform-server": "^20.0.2",
50-
"@angular/router": "^20.0.2",
51-
"@angular/ssr": "^20.0.2",
42+
"@angular/animations": "^21.0.0",
43+
"@angular/common": "^21.0.0",
44+
"@angular/compiler": "^21.0.0",
45+
"@angular/core": "^21.0.0",
46+
"@angular/forms": "^21.0.0",
47+
"@angular/platform-browser": "^21.0.0",
48+
"@angular/platform-browser-dynamic": "^21.0.0",
49+
"@angular/platform-server": "^21.0.0",
50+
"@angular/router": "^21.0.0",
51+
"@angular/ssr": "^21.0.0",
5252
"cors": "^2.8.5",
5353
"express": "^4.18.2",
5454
"keycloak-js": "^26.2.0",
@@ -57,15 +57,15 @@
5757
"zone.js": "~0.15.1"
5858
},
5959
"devDependencies": {
60-
"@angular-devkit/build-angular": "^20.0.2",
61-
"@angular-eslint/builder": "20.0.0",
62-
"@angular-eslint/eslint-plugin": "20.0.0",
63-
"@angular-eslint/eslint-plugin-template": "20.0.0",
64-
"@angular-eslint/schematics": "20.0.0",
65-
"@angular-eslint/template-parser": "20.0.0",
66-
"@angular/build": "^20.0.2",
67-
"@angular/cli": "^20.0.2",
68-
"@angular/compiler-cli": "^20.0.2",
60+
"@angular-devkit/build-angular": "^21.0.0",
61+
"@angular-eslint/builder": "21.0.1",
62+
"@angular-eslint/eslint-plugin": "21.0.1",
63+
"@angular-eslint/eslint-plugin-template": "21.0.1",
64+
"@angular-eslint/schematics": "21.0.1",
65+
"@angular-eslint/template-parser": "21.0.1",
66+
"@angular/build": "^21.0.0",
67+
"@angular/cli": "^21.0.0",
68+
"@angular/compiler-cli": "^21.0.0",
6969
"@types/express": "^4.17.17",
7070
"@types/jasmine": "^5.1.8",
7171
"@types/node": "^22.15.29",
@@ -80,8 +80,8 @@
8080
"karma-coverage-istanbul-reporter": "~3.0.3",
8181
"karma-jasmine": "~5.1.0",
8282
"karma-jasmine-html-reporter": "^2.1.0",
83-
"ng-packagr": "^20.0.0",
83+
"ng-packagr": "^21.0.0",
8484
"prettier": "^3.5.3",
85-
"typescript": "~5.8.0"
85+
"typescript": "~5.9.3"
8686
}
8787
}

‎projects/examples/docker/README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ This directory contains a `docker-compose` file designed to bootstrap a Keycloak
77
The setup includes an exported realm named **`keycloak-angular-sandbox`**, preconfigured with the following users:
88

99
- **Admin**
10-
1110
- **Username**: `admin`
1211
- **Password**: `admin`
1312

‎projects/examples/fetch_config/src/app/components/home/home.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@ <h1>Welcome to the Keycloak Angular Demo App!</h1>
2323
</ul>
2424
</section>
2525

26-
<div *ngIf="copyMessage$ | async as copyMessage" class="message-box">
27-
{{ copyMessage }}
28-
</div>
26+
@if (copyMessage$ | async; as copyMessage) {
27+
<div class="message-box">
28+
{{ copyMessage }}
29+
</div>
30+
}
2931
</main>
3032
</div>

‎projects/examples/ngmodule/src/app/app.component.html‎

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,42 @@
11
<h1>Keycloak Angular Example</h1>
22

3-
<button *ngIf="isLoggedIn" type="button" (click)="logout()">Log out</button>
4-
<button *ngIf="!isLoggedIn" type="button" (click)="login()">Log in</button>
3+
@if (isLoggedIn) {
4+
<button type="button" (click)="logout()">Log out</button>
5+
}
6+
@if (!isLoggedIn) {
7+
<button type="button" (click)="login()">Log in</button>
8+
}
59

6-
<ng-container *ngIf="userProfile">
10+
@if (userProfile) {
711
<h2>User information</h2>
812
<table>
9-
<tr *ngIf="userProfile.username">
10-
<th scope="row">Username</th>
11-
<td>{{ userProfile.username }}</td>
12-
</tr>
13-
<tr *ngIf="userProfile.firstName">
14-
<th scope="row">First name</th>
15-
<td>{{ userProfile.firstName }}</td>
16-
</tr>
17-
<tr *ngIf="userProfile.lastName">
18-
<th scope="row">First name</th>
19-
<td>{{ userProfile.lastName }}</td>
20-
</tr>
21-
<tr *ngIf="userProfile.email">
22-
<th scope="row">E-mail</th>
23-
<td>{{ userProfile.email }}</td>
24-
</tr>
13+
@if (userProfile.username) {
14+
<tr>
15+
<th scope="row">Username</th>
16+
<td>{{ userProfile.username }}</td>
17+
</tr>
18+
}
19+
@if (userProfile.firstName) {
20+
<tr>
21+
<th scope="row">First name</th>
22+
<td>{{ userProfile.firstName }}</td>
23+
</tr>
24+
}
25+
@if (userProfile.lastName) {
26+
<tr>
27+
<th scope="row">First name</th>
28+
<td>{{ userProfile.lastName }}</td>
29+
</tr>
30+
}
31+
@if (userProfile.email) {
32+
<tr>
33+
<th scope="row">E-mail</th>
34+
<td>{{ userProfile.email }}</td>
35+
</tr>
36+
}
2537
<tr>
2638
<th scope="row">E-mail verified</th>
2739
<td>{{ userProfile.emailVerified ? 'Yes' : 'No' }}</td>
2840
</tr>
2941
</table>
30-
</ng-container>
42+
}

‎projects/examples/standalone/src/app/components/home/home.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,10 @@ <h1>Welcome to the Keycloak Angular Demo App!</h1>
2323
</ul>
2424
</section>
2525

26-
<div *ngIf="copyMessage$ | async as copyMessage" class="message-box">
27-
{{ copyMessage }}
28-
</div>
26+
@if (copyMessage$ | async; as copyMessage) {
27+
<div class="message-box">
28+
{{ copyMessage }}
29+
</div>
30+
}
2931
</main>
3032
</div>

‎projects/keycloak-angular/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "keycloak-angular",
3-
"version": "20.0.0",
3+
"version": "21.0.0",
44
"description": "Easy Keycloak integration for Angular applications.",
55
"repository": {
66
"type": "git",
@@ -26,9 +26,9 @@
2626
"oidc"
2727
],
2828
"peerDependencies": {
29-
"@angular/common": "^20",
30-
"@angular/core": "^20",
31-
"@angular/router": "^20",
29+
"@angular/common": "^21",
30+
"@angular/core": "^21",
31+
"@angular/router": "^21",
3232
"rxjs": "^7",
3333
"keycloak-js": "^18 || ^19 || ^20 || ^21 || ^22 || ^23 || ^24 || ^25 || ^26"
3434
},

‎projects/keycloak-angular/src/lib/directives/has-roles.directive.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ describe('HasRolesDirective', () => {
119119
TestBed.runInInjectionContext(() => {
120120
const directive = TestBed.inject(HasRolesDirective);
121121
directive['render']();
122-
122+
123123
expect(mockViewContainerRef.clear).toHaveBeenCalled();
124124
});
125125
});

0 commit comments

Comments
 (0)