I'm trying to execute the following tutorial to integrate an Angular 12 application with Keycloak: Keycloak Integration with Angular Frontend (I've checked other similar tutorials and the instructions are the same).
As described in the article, I've inserted the following lines in src\environments\environment.ts:
import { KeycloakConfig } from 'keycloak-angular';
// Add here your keycloak setup infos
let keycloakConfig: KeycloakConfig = {
url: 'http://<my-keycloak-ip:8088>/auth',
realm: '<my-realm-name>',
clientId: '<my-client-id>',
"credentials": {
"secret": "<my-client-secret>"
}
};
export const environment = {
...
keycloak: keycloakConfig,
...
};
When I start the application with ng serve, I got the following build error:
Error: src/environments/environment.ts:14:7 - error TS2322: Type '{ url: string; realm: string; clientId: string; credentials: { secret: string; }; }' is not
assignable to type 'KeycloakConfig'.
Object literal may only specify known properties, and '"credentials"' does not exist in type 'KeycloakConfig'.
14 "credentials": {
~~~~~~~~~~~~~~~~
15 "secret": "<my-client-secret>"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
17 }
~~~~~~~
I'using Angular v12 and keylcoak-angular 8.2.0 + keycloak-js 13.0.1, in any case, below are the full ng version output and package.json contents.
ng version:
ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ ? \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 12.0.4
Node: 12.18.0
Package Manager: npm 6.14.4
OS: win32 x64
Angular: 12.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1200.4
@angular-devkit/build-angular 12.0.4
@angular-devkit/core 12.0.4
@angular-devkit/schematics 12.0.4
@schematics/angular 12.0.4
rxjs 6.5.5
typescript 4.2.4
package.json:
{
"name": "<my-angular-app>",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.0.4",
"@angular/cdk": "^12.0.4",
"@angular/common": "~12.0.4",
"@angular/compiler": "~12.0.4",
"@angular/core": "~12.0.4",
"@angular/forms": "~12.0.4",
"@angular/material": "^12.0.4",
"@angular/platform-browser": "~12.0.4",
"@angular/platform-browser-dynamic": "~12.0.4",
"@angular/router": "~12.0.4",
"admin-lte": "^3.0.5",
"keycloak-angular": "^8.2.0",
"keycloak-js": "^13.0.1",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.0.4",
"@angular/cli": "~12.0.4",
"@angular/compiler-cli": "~12.0.4",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.2.4"
}
}