# Keycloak and Angular CLI

DevFeed: [Keycloak and Angular CLI](<https://devfeed.tech/articles/keycloak-and-angular-cli-31567.md>)

Original publisher: [Read original article](<https://www.keycloak.org/2018/02/keycloak-and-angular-cli>)

Author: Stan Silvert

Published: 2018-02-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Keycloak Blog](<https://devfeed.tech/sources/keycloak-blog.md>)

Topics: [Keycloak](<https://devfeed.tech/topics/keycloak.md>), [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [npm](<https://devfeed.tech/topics/npm.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [account-management](<https://devfeed.tech/tags/account-management.md>), [angular](<https://devfeed.tech/tags/angular.md>), [angularjs](<https://devfeed.tech/tags/angularjs.md>), [browser](<https://devfeed.tech/tags/browser.md>), [cli](<https://devfeed.tech/tags/cli.md>), [idm](<https://devfeed.tech/tags/idm.md>), [kerberos](<https://devfeed.tech/tags/kerberos.md>), [keycloak](<https://devfeed.tech/tags/keycloak.md>), [ldap](<https://devfeed.tech/tags/ldap.md>), [npm](<https://devfeed.tech/tags/npm.md>), [openid-connect](<https://devfeed.tech/tags/openid-connect.md>), [saml](<https://devfeed.tech/tags/saml.md>), [self-service](<https://devfeed.tech/tags/self-service.md>), [sso](<https://devfeed.tech/tags/sso.md>)

## AI overview

This tutorial shows how to install and configure Keycloak in an Angular CLI application using a schematic. It covers importing a generated client configuration, running the application, and using the resulting Keycloak service and guard for authentication-related features. The integration is described as early alpha software.

## Source excerpt

So I made a schematic that installs and configures Keycloak in any Angular CLI application. If you want to try it out, do this from the command line: npm install -g @ssilvert/keycloak-schematic ng new myApp cd myApp ng generate keycloak --collection @ssilvert/keycloak-schematic --clientId=myApp Now Keycloak is integrated into your app. Of course, you can do this with any existing Angular CLI application. It doesn't have to be a new one. Then, go to the Keycloak Admin console (master realm) and go to Clients --> Add Client --> Select File. Select the client-import.json file that the "ng generate keycloak" command created in /myApp. Assuming your Keycloak server is running on localhost:8080, you are ready to go. Start your application: ng serve Go to your browser to start the app and see this: Oh joy! myApp is protected with Keycloak! The keycloak-schematic installs a KeycloakService and a KeycloakGuard. So you can easily: Add login/logout buttons Access user self service (account management) Guard protected routes instead of the whole app Work with roles Lots more Click here for a comprehensive getting started guide, full documentation, and sample code. Note that this stuff is early alpha right now. And it will move from @ssilvert to @keycloak before long. In the mean time, I'd love to get feedback. There is a lot to do to make Keycloak/Angular integration even better, but I think the keycloak-schematic is a big step forward. So long, and thanks for all the fish.