Reference
Prepare Sample
# git clone https://github.com/mauriciovigolo/keycloak-angular/example
# cd keycloak-angular/example
# npm install
Upgrade Angular packages from
- core@12.0.0 -> core@12.2.14
- cli@12.0.0 -> cli @12.2.14
# ng update @angular/core@12.2.14 --allow-dirty
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
√ Package successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 20 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular/compiler-cli @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/animations @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/common @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/compiler @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/core @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/forms @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/platform-browser @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/router @ "12.2.14" (was "12.0.0")...
√ Packages successfully installed.
** Executing migrations of package '@angular/core' **
> Automatically migrates shadow-piercing selector from `/deep/` to the recommended alternative `::ng-deep`.
Migration completed.
# ng update @angular/cli@12.2.14 --allow-dirty
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
√ Package successfully installed.
Repository is not clean. Update changes will be mixed with pre-existing changes.
Using package manager: 'npm'
Collecting installed dependencies...
Found 20 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular-devkit/build-angular @ "12.2.14" (was "12.0.0")...
Updating package.json with dependency @angular/cli @ "12.2.14" (was "12.0.0")...
UPDATE package.json (938 bytes)
√ Packages successfully installed.
** Executing migrations of package '@angular/cli' **
> Remove invalid 'skipTests' option in '@schematics/angular:module' Angular schematic options.
UPDATE angular.json (3482 bytes)
Migration completed.
> Replace the deprecated '--prod' in package.json scripts.
UPDATE package.json (938 bytes)
Migration completed.
Validate package.json
# cat package.json
{
"name": "keycloak-angular-example",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.14",
"@angular/common": "~12.2.14",
"@angular/compiler": "~12.2.14",
"@angular/core": "~12.2.14",
"@angular/forms": "~12.2.14",
"@angular/platform-browser": "~12.2.14",
"@angular/platform-browser-dynamic": "~12.2.14",
"@angular/router": "~12.2.14",
"keycloak-angular": "^8.3.0",
"keycloak-js": "^15.0.0",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.14",
"@angular/cli": "~12.2.14",
"@angular/compiler-cli": "~12.2.14",
"@types/node": "^15.3.0",
"ts-node": "^9.1.1",
"tslint": "~6.1.0",
"typescript": "~4.2.4"
}
}
Prepare Keycloak Server
# docker-compose up
Starting example_postgres_1 ... done
Recreating example_keycloak_1 ... done
Attaching to example_postgres_1, example_keycloak_1
postgres_1 |
postgres_1 | PostgreSQL Database directory appears to contain a database; Skipping initialization
postgres_1 |
postgres_1 | 2021-12-15 11:06:00.223 UTC [1] LOG: starting PostgreSQL 14.1 (Debian 14.1-1.pgdg110+1) on x86_64-pc-linux-gnu, compiled by gcc (Debian 10.2.1-6) 10.2.1 20210110, 64-bit
postgres_1 | 2021-12-15 11:06:00.223 UTC [1] LOG: listening on IPv4 address "0.0.0.0", port 5432
postgres_1 | 2021-12-15 11:06:00.223 UTC [1] LOG: listening on IPv6 address "::", port 5432
postgres_1 | 2021-12-15 11:06:00.231 UTC [1] LOG: listening on Unix socket "/var/run/postgresql/.s.PGSQL.5432"
postgres_1 | 2021-12-15 11:06:00.244 UTC [27] LOG: database system was shut down at 2021-12-15 10:09:12 UTC
postgres_1 | 2021-12-15 11:06:00.250 UTC [1] LOG: database system is ready to accept connections
keycloak_1 | Added 'admin' to '/opt/jboss/keycloak/standalone/configuration/keycloak-add-user.json', restart server to load user
keycloak_1 | -b 0.0.0.0
keycloak_1 | =========================================================================
keycloak_1 |
keycloak_1 | Using PostgreSQL database
keycloak_1 |
keycloak_1 | =========================================================================
Login to Keycloak Server and validate Relm and Client settings
- URL : http://localhost:8080/auth – User : admin – Password: admin
- Realm: Master
- Client: keycloak-angular
Start Angular Project with ng serve
# ng serve
- Generating browser application bundles (phase: setup)...Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling keycloak-angular : es2015 as esm2015
√ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.60 MB
polyfills.js | polyfills | 508.72 kB
styles.css, styles.js | styles | 381.52 kB
main.js | main | 19.48 kB
runtime.js | runtime | 6.78 kB
| Initial Total | 3.50 MB
Build at: 2021-12-15T11:30:23.855Z - Hash: 0f6c76596e38c91aa27d - Time: 92790ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
√ Compiled successfully.
√ Browser application bundle generation complete.
5 unchanged chunks
Build at: 2021-12-15T11:30:25.757Z - Hash: 602e23a4df626059aa0f - Time: 1134ms
√ Compiled successfully.
Test Application
- Open App at http://localhost:4200/
Be First to Comment