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

Brian Schofield wrote Yes I am, but for the moment I didn't spent a lot of time on app packaging and webpack tuning. I agree with you, for distribution, copying the keycloak.json file will be lighter than copying an entire directory, so I will keep your solution in mind ;) -- 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.

@Ebondu I've been able to authenticate, I can see the new session created within the Keycloak admin panel. But every additional method I try to invoke returns a charAt error and each property returns undefined. Is that because your module is still in development or should I expect the defined methods to function? Thanks. On Wed, Feb 1, 2017 at 4:01 AM, ebondu <dev.ebondu(a)gmail.com&gt; wrote: -- Brian §chofield

In general, I'm just trying to grab the JWT and some user data. I've gone through: login isTokenExpired More importantly properties like: Keycloak.authenication returns false everytime Keycloak.token returns undefined Keycloak.realm returns undefined Keycloak.clientID returns undefined On Wed, Feb 1, 2017 at 9:44 AM, ebondu <dev.ebondu(a)gmail.com&gt; wrote: -- Brian §chofield

@ebondu I was trying to extract the info in a callback. Let me know when you push some big changes I can help test within my project (I'll keep the branch open). @keycloak-user I had to pivot to accomplish integration before end of sprint so I figured out how to get keycloak-js working within Typescript project using webpack(a)1.14.0. Modified a few lines of code within a demo example: https://github.com/keycloak/keycloak/tree/master/examples/demo-template/a... If anyone is interested in how to accomplish please feel free to message, it's actually pretty simple and allows you to get away from script tags on your index.html and bundle the keycloak adapter naturally. (If I get some free time ill see if I can publish a demo with webpack) On Thu, Feb 2, 2017 at 3:28 AM, ebondu <dev.ebondu(a)gmail.com&gt; wrote: -- Brian §chofield