On 1/27/2017 2:13 PM, ebondu wrote: Yes, and if you do please report back and let us know what you think. I've been planning to do a Keycloak/TypeScript adapter and I was thrilled to see this effort. That being said, I don't understand why the plain javascript adapter wouldn't work with WebPack. We already have an Angular 2 demo app that uses it. What is it about WebPack that makes the javascript adapter hard to use?

Brian, Let me know if you have any debug/error trace. For now I focused on the migration from JS to Typescript, so the configuration/use may be tricky. However as I can use it in a webpack based angular2 app the lib should fit your need. -- View this message in context: http://keycloak-user.88327.x6.nabble.com/keycloak-user-Angular-2-with-Web... Sent from the keycloak-user mailing list archive at Nabble.com.

Hi Brian, I just updated the lib to version 0.3.0 so you may have to update you app. On my side, to try the lib I followed these steps : - creation of a new app following angular2-webpack#installing <https://github.com/preboot/angular2-webpack#installing> - adding the lib to the app with the npm command "npm install @ebondu/angular2-keycloak --save" - changing the "app.module.ts" file as explained in readme <https://github.com/ebondu/angular2-keycloak#usage> - *adding a valid keycloak.json in the /src/public folder* (this point is missing in the readme) - adapting the "home.component.ts" file as explained in the readme to inject Keycloak class and initialize it. When I go to the home page, I am redirected to the KC server. Here is the modified "home.component.ts" content : import { Component, OnInit } from '@angular/core'; import { Keycloak } from '@ebondu/angular2-keycloak'; @Component({ selector: 'my-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit { constructor(private keycloak: Keycloak) { // Do stuff } ngOnInit() { console.log('Hello Home'); this.keycloak.init({onLoad:'login-required'}); } } -- View this message in context: http://keycloak-user.88327.x6.nabble.com/keycloak-user-Angular-2-with-Web... Sent from the keycloak-user mailing list archive at Nabble.com.

I made the modifications to my project based off your recommendations. Here's the stacktrace I'm getting with the latest update: *TypeError: Cannot read property 'charAt' of undefined* * at Function.Keycloak.getRealmUrl (eval at <anonymous> (http://localhost:3000/app.js:1210:2 <http://localhost:3000/app.js:1210:2>), <anonymous>:200:37)* * at Function.Keycloak.createLoginUrl (eval at <anonymous> (http://localhost:3000/app.js:1210:2 <http://localhost:3000/app.js:1210:2>), <anonymous>:153:30)* * at DefaultAdapter.login (eval at <anonymous> (http://localhost:3000/app.js:1216:2 <http://localhost:3000/app.js:1216:2>), <anonymous>:7:65)* * at Function.Keycloak.login (eval at <anonymous> (http://localhost:3000/app.js:1210:2 <http://localhost:3000/app.js:1210:2>), <anonymous>:32:35)* at AppComponent.login (eval at <anonymous> ( http://localhost:3000/app.js:1186:2), <anonymous>:40:38) at AppComponent.ngOnInit (eval at <anonymous> ( http://localhost:3000/app.js:1186:2), <anonymous>:35:14) at Wrapper_AppComponent.ngDoCheck (/AppModule/AppComponent/wrapper.ngfactory.js:22:53) at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:28:26) at CompiledTemplate.proxyViewClass.AppView.detectChanges (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:12738:18) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:12885:48) at ViewRef_.detectChanges (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:9907:24) at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8797:71) at Array.forEach (native) at ApplicationRef_.tick (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8797:29) at ApplicationRef_._loadComponent (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8772:18) at ApplicationRef_.bootstrap (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8760:18) at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8581:93) at Array.forEach (native) at PlatformRef_._moduleDoBootstrap (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8581:46) at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8533:31) at ZoneDelegate.invoke (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:242:26) at Object.onInvoke (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:4427:41) at ZoneDelegate.invoke (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:241:32) at Zone.run (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:113:43) at eval (eval at <anonymous> (http://localhost:3000/polyfills.js:2252:2), <anonymous>:535:57) at ZoneDelegate.invokeTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:275:35) at Object.onInvokeTask (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:4418:41) at ZoneDelegate.invokeTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:274:40) at Zone.runTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:151:47) at drainMicroTaskQueue (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:433:35)

All I can say right now is errors and more errors :( The charAt issue was coming from the login function, I have removed that for now. What I'm seeing in console is as shown below (sorry for the long trace). Do note that I am getting console out that says 'initializing Keycloak method' however it's seems that the request for the keycloak.json is returning html. Any ideas? initializing Keycloak method VM1237:3521 EXCEPTION: Unexpected token < in JSON at position 0 ErrorHandler.handleError @ VM1237:3521 next @ VM1237:8529 schedulerFn @ VM1237:4138 SafeSubscriber.__tryOrUnsub @ VM1242:223 SafeSubscriber.next @ VM1242:172 Subscriber._next @ VM1242:125 Subscriber.next @ VM1242:89 Subject.next @ VM1238:55 EventEmitter.emit @ VM1237:4124 NgZone.triggerError @ VM1237:4487 onHandleError @ VM1237:4448 ZoneDelegate.handleError @ VM1217:246 Zone.runTask @ VM1217:154 ZoneTask.invoke @ VM1217:345 VM1237:3526 ORIGINAL STACKTRACE: ErrorHandler.handleError @ VM1237:3526 next @ VM1237:8529 schedulerFn @ VM1237:4138 SafeSubscriber.__tryOrUnsub @ VM1242:223 SafeSubscriber.next @ VM1242:172 Subscriber._next @ VM1242:125 Subscriber.next @ VM1242:89 Subject.next @ VM1238:55 EventEmitter.emit @ VM1237:4124 NgZone.triggerError @ VM1237:4487 onHandleError @ VM1237:4448 ZoneDelegate.handleError @ VM1217:246 Zone.runTask @ VM1217:154 ZoneTask.invoke @ VM1217:345 VM1237:3527 SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at Response.Body.json (eval at <anonymous> ( http://localhost:3000/vendor.js:145:2), <anonymous>:777:29) at MapSubscriber.eval [as project] (eval at <anonymous> ( http://localhost:3000/app.js:1210:2), <anonymous>:424:75) at MapSubscriber._next (eval at <anonymous> ( http://localhost:3000/vendor.js:496:2), <anonymous>:77:35) at MapSubscriber.Subscriber.next (eval at <anonymous> ( http://localhost:3000/vendor.js:54:2), <anonymous>:89:18) at XMLHttpRequest.onLoad (eval at <anonymous> ( http://localhost:3000/vendor.js:145:2), <anonymous>:1180:42) at ZoneDelegate.invokeTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:275:35) at Object.onInvokeTask (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:4418:41) at ZoneDelegate.invokeTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:274:40) at Zone.runTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:151:47) at XMLHttpRequest.ZoneTask.invoke (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:345:33) ------------- Elapsed: 75 ms; At: Mon Jan 30 2017 14:04:39 GMT-0600 (CST) ------------- at getStacktraceWithUncaughtError (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:33:12) [angular] at new LongStackTrace (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:27:22) [angular] at Object.onScheduleTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:83:18) [angular] at ZoneDelegate.scheduleTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:252:49) [angular] at Zone.scheduleEventTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:171:39) [angular] at zoneAwareAddListener (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:1226:14) [angular] at XMLHttpRequest.addEventListener (eval at createNamedFn (eval at <anonymous> (http://localhost:3000/polyfills.js:2252:2)), <anonymous>:3:43) [angular] at Observable.eval [as _subscribe] (eval at <anonymous> ( http://localhost:3000/vendor.js:145:2), <anonymous>:1227:22) [angular] at Observable.subscribe (eval at <anonymous> ( http://localhost:3000/vendor.js:36:2), <anonymous>:45:27) [angular] at MapOperator.call (eval at <anonymous> ( http://localhost:3000/vendor.js:496:2), <anonymous>:54:23) [angular] at Observable.subscribe (eval at <anonymous> ( http://localhost:3000/vendor.js:36:2), <anonymous>:42:22) [angular] at Observable.eval [as _subscribe] (eval at <anonymous> ( http://localhost:3000/app.js:1210:2), <anonymous>:424:86) [angular] at Observable.subscribe (eval at <anonymous> ( http://localhost:3000/vendor.js:36:2), <anonymous>:45:27) [angular] at Keycloak.init (eval at <anonymous> ( http://localhost:3000/app.js:1210:2), <anonymous>:405:44) [angular] at AppComponent.ngOnInit (eval at <anonymous> ( http://localhost:3000/app.js:1186:2), <anonymous>:34:23) [angular] at Wrapper_AppComponent.ngDoCheck (/AppModule/AppComponent/wrapper.ngfactory.js:22:53) [angular] at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:28:26) [angular] at CompiledTemplate.proxyViewClass.AppView.detectChanges (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:12738:18) [angular] at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:12885:48) [angular] at ViewRef_.detectChanges (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:9907:24) [angular] at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8797:71) [angular] at Array.forEach (native) [angular] at ApplicationRef_.tick (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8797:29) [angular] at ApplicationRef_._loadComponent (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8772:18) [angular] at ApplicationRef_.bootstrap (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8760:18) [angular] at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8581:93) [angular] at Array.forEach (native) [angular] at PlatformRef_._moduleDoBootstrap (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8581:46) [angular] at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8533:31) [angular] at Object.onInvoke (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:4427:41) [angular] at Zone.run (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:113:43) [angular => angular] at eval (eval at <anonymous> (http://localhost:3000/polyfills.js:2252:2), <anonymous>:535:57) [angular] at Object.onInvokeTask (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:4418:41) [angular] at ZoneDelegate.invokeTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:274:40) [angular] at Zone.runTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:151:47) [<root> => angular] at drainMicroTaskQueue (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:433:35) [<root>] ------------- Elapsed: 114 ms; At: Mon Jan 30 2017 14:04:38 GMT-0600 (CST) ------------- at getStacktraceWithUncaughtError (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:33:12) [angular] at new LongStackTrace (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:27:22) [angular] at Object.onScheduleTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:83:18) [angular] at ZoneDelegate.scheduleTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:252:49) [angular] at Zone.scheduleMicroTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:165:39) [angular] at scheduleResolveOrReject (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:533:14) [angular] at resolvePromise (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:496:21) [angular] at eval (eval at <anonymous> (http://localhost:3000/polyfills.js:2252:2), <anonymous>:535:17) [angular] at Object.onInvokeTask (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:4418:41) [angular] at ZoneDelegate.invokeTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:274:40) [angular] at Zone.runTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:151:47) [<root> => angular] at drainMicroTaskQueue (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:433:35) [<root>] ------------- Elapsed: 7 ms; At: Mon Jan 30 2017 14:04:38 GMT-0600 (CST) ------------- at getStacktraceWithUncaughtError (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:33:12) [angular] at new LongStackTrace (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:27:22) [angular] at Object.onScheduleTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2258:2), <anonymous>:83:18) [angular] at ZoneDelegate.scheduleTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:252:49) [angular] at Zone.scheduleMicroTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:165:39) [angular] at scheduleResolveOrReject (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:533:14) [angular] at ZoneAwarePromise.then (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:622:17) [angular] at new ApplicationInitStatus (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:3791:64) [angular] at AppModuleInjector.createInternal (/AppModule/module.ngfactory.js:323:36) [angular] at AppModuleInjector.NgModuleInjector.create (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8979:80) [angular] at NgModuleFactory.create (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8953:22) [angular] at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8523:65) [angular] at Object.onInvoke (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:4427:41) [angular] at Zone.run (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:113:43) [<root> => angular] at NgZone.run (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:4296:66) [<root>] at PlatformRef_._bootstrapModuleFactoryWithZone (eval at <anonymous> ( http://localhost:3000/vendor.js:24:2), <anonymous>:8521:27) [<root>] at eval (eval at <anonymous> (http://localhost:3000/vendor.js:24:2), <anonymous>:8572:63) [<root>] at Zone.run (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:113:43) [<root> => <root>] at eval (eval at <anonymous> (http://localhost:3000/polyfills.js:2252:2), <anonymous>:535:57) [<root>] at Zone.runTask (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:151:47) [<root> => <root>] at drainMicroTaskQueue (eval at <anonymous> ( http://localhost:3000/polyfills.js:2252:2), <anonymous>:433:35) [<root>] On Mon, Jan 30, 2017 at 1:18 PM, ebondu <dev.ebondu(a)gmail.com&gt; wrote: -- Brian §chofield

We figured out the issue. Yes, the keycloak.json file was not in the appropriate directory. Webpack was not moving my static files into my distribution directory. We are currently getting prompt to login. I've got a few more use cases I need to develop using keycloak, I will let you know if anything else pops up. -Brian On Mon, Jan 30, 2017 at 2:30 PM, ebondu <dev.ebondu(a)gmail.com&gt; wrote: -- Brian §chofield

@Niko I found it to be webpack being the primary issue. In general webpack is exact definition of a bundler, in order for something to get included in the bundle either A: you need to have the appropriate loader B: you need to have the appropriate plugin If you're using webpack to build a distribution directory for your bundle then you need to move your static assets into that distribution directory as well because you don't want the name of your static assets to be changed into some hash based bundle format. Keycloak.js is looking for the exact name keycloak.json, if you let it go through the bundling process by requiring or importing keycloak.json then the output format in your bundle will likely be something like this keycloak.[hash].* For me I had to get keycloak.json to copy into the dist directory on build. The easiest way I found was to include the copy webpack plugin. Here's my quick instructions to get it running: *Within your package.json:* npm install copy-webpack-plugin --savedev *Within your webpack.config:* new CopyWebpackPlugin([{ from: 'keycloak.json', to: 'keycloak.json' }]) Result on build: Moves keycloak.json renames to keycloak.json adds to dist directory. If you have any questions let me know. On Tue, Jan 31, 2017 at 4:46 AM, Niko Köbler <niko(a)n-k.de&gt; wrote: -- Brian §chofield

@ebondu Are you not using HtmlWebpackPlugin or CommonChunksPlugin? I only ask because I would be hesitant to use CopyWebpackPlugin to copy an entire directory especially when you can have webpack inject all your bundles into your index page and allow webpack to configure and build your distribution directory. On Tue, Jan 31, 2017 at 9:32 AM, ebondu <dev.ebondu(a)gmail.com&gt; wrote: -- Brian §chofield

Niko Köbler wrote Yes, I think it is probably a Typescript issue rather than a Angular2 conflict. The idea behind the Typscript lib is to ease KC integration in angular2 apps (packaging, Observables, etc.) -- View this message in context: http://keycloak-user.88327.x6.nabble.com/keycloak-user-Angular-2-with-Web... Sent from the keycloak-user mailing list archive at Nabble.com.

@Brian The module is currently under development so some methods may have not been fully tested. Which methods are you testing exactly? -- View this message in context: http://keycloak-user.88327.x6.nabble.com/keycloak-user-Angular-2-with-Web... Sent from the keycloak-user mailing list archive at Nabble.com.

@Brian I think you are trying to access these vars *before* the Keycloak component has been initialized. The global approach is to use Observables to be notified when states have been updated. For example, to get the user data, you should subscribe to the "authenticatedObserver" and then use the "tokenParsed" field wich contains the decoded JWT : Keycloak.authenticatedObs.subscribe(auth => { if(auth) { console.info(Keycloak.tokenParsed.given_name); } }); I will try to provide a basic example and a more detailed documentation soon. -- View this message in context: http://keycloak-user.88327.x6.nabble.com/keycloak-user-Angular-2-with-Web... Sent from the keycloak-user mailing list archive at Nabble.com.

@Brian, I just updated the lib and added an Angular2 / Webpack2 example app <https://github.com/ebondu/angular2-keycloak/tree/master/example/angular2-... you should be able to deploy in the demo distribution. -- View this message in context: http://keycloak-user.88327.x6.nabble.com/keycloak-user-Angular-2-with-Web... Sent from the keycloak-user mailing list archive at Nabble.com.