[keycloak-user] Angular 2 with Webpack

[Brian Schofield]

@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 at n-k.de> wrote:

> I didn’t have the time to dive really into it, but what I observed so long:
>
> - keycloak-js with React.js and plain JavaScript, bundled with Webpack 1
> works like a charm.
> - keycloak-js with Angular 2 and TypeScript, bundled with Webpack 2
> results in errors.
>
> So, the cause might be Webpack 2 or TypeScript….
> (I think it’s Typescript)
>
> My quick solution was to add keycloak-js with standard <script> tag in
> index.html.
> Other integration was to follow the example https://github.com/
> keycloak/keycloak/tree/master/examples/demo-template/angular2-product-app
> Works.
>
> - Niko
>
>
> Am 30.01.2017 um 21:53 schrieb Brian Schofield <scope022 at gmail.com>:
>
> 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 at gmail.com> wrote:
>
> The keycloak.json looks to no be accessible from your browser, place it
> correctly in your project to make it accessible (my-app/src/public/ in my
> example)
>
>
> Brian Schofield wrote
>
> 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.
>
>
> Can you share the html result for the request to keycloak.json to confirm
> it
> is a 404 error page?
>
>
>
>
> --
> View this message in context: http://keycloak-user.88327.x6.
> nabble.com/keycloak-user-Angular-2-with-Webpack-tp2493p2530.html
> Sent from the keycloak-user mailing list archive at Nabble.com.
> _______________________________________________
> keycloak-user mailing list
> keycloak-user at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/keycloak-user
>
>
>
>
> --
> Brian §chofield
> _______________________________________________
> keycloak-user mailing list
> keycloak-user at lists.jboss.org
> https://lists.jboss.org/mailman/listinfo/keycloak-user
>
>
>


-- 
Brian §chofield