Angular Module Federation #14885

fraschizzato · 2022-10-13T19:22:22Z

fraschizzato
Oct 13, 2022

Hi,
at this time I'm running keycloak-angular in a standalone app with keycloak-angular and the (working) following configuration/initialization:

Keycloak.init function:

import {KeycloakService} from "keycloak-angular";
import {environment} from "../../environments/environment";
import { KeycloakOnLoad } from "keycloak-js";

export function initializeKeycloak(keycloak: KeycloakService) {
    const 'keycloak']['onLoad'] as KeycloakOnLoad;
    return () =>
        keycloak.init({
            config: {
                realm: environment['keycloak']['realm'],
                url: environment['keycloak']['url'],
                clientId: environment['keycloak']['clientId']
            },
            initOptions: {
                onLoad: onLoad,
                checkLoginIframe: environment['keycloak']['checkLoginIframe'],
                silentCheckSsoRedirectUri:
                    window.location.origin + '/assets/silent-check-sso.html'
            },
            bearerExcludedUrls: ['']
        })
}

AuthModule (first loaded):

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { AuthComponent } from './auth.component';
import {CommonModule} from "@angular/common";
import {MatIconModule} from "@angular/material/icon";
import {AuthGuard} from "./auth.guard";
import {initializeKeycloak} from "./initKeycloak";


@NgModule({
  declarations: [AuthComponent],
  imports: [CommonModule, KeycloakAngularModule,MatIconModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
    },
      AuthGuard
  ],
  exports: [
      AuthComponent
  ],
  bootstrap: [AuthComponent]
})
export class AuthModule {}

If I try to share the keycloak-js in webpack (to federate the module) like this:

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  shared: {

    "@angular/core": { singleton: true, strictVersion: true, requiredVersion: '14.2.5', eager: true },
    "@angular/common": { singleton: true, strictVersion: true, requiredVersion: '14.2.5' , eager: true},
    "@angular/common/http": { singleton: true, strictVersion: true, requiredVersion: '14.2.5' , eager: true},
    "@angular/router": { singleton: true, strictVersion: true, requiredVersion: '14.2.5' , eager: true},
    "@angular/material": { singleton: true, strictVersion: true, requiredVersion: '14.2.5' , eager: true},
    'keycloak-js': { singleton: true, strictVersion: true, requiredVersion: '19.0.2', eager: true },
    'keycloak-angular': { singleton: true , strictVersion: true, requiredVersion: '12.1.0' },
    //...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
  },

});

I'll get the following error (The share that causes the issue is keycloak-js):

src_bootstrap_ts.js:1 ERROR TypeError: keycloak_js__WEBPACK_IMPORTED_MODULE_3__ is not a function
    at keycloak-angular.mjs:114:26
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)
    at _next (asyncToGenerator.js:25:1)
    at asyncToGenerator.js:32:1
    at new ZoneAwarePromise (zone.js:1387:29)
    at asyncToGenerator.js:21:1
    at KeycloakService.init (keycloak-angular.mjs:111:30)
    at Array.<anonymous> (initKeycloak.ts:8:18)
    at ApplicationInitStatus.runInitializers (core.mjs:25353:36)

This is in the "shell" frontend, the one that is over all the other frontends. As I know the only way to share the same instance is by sharing the module. At this time I'm passing the token to the mfe via an external service library or through localStorage , the single frontend have an independent keycloak.init in the app.module (as in federation I'm passing the child module).

Thanks

Versions.
keycloak-angular 12.1.0
keycloak-js 19.0.2

Repro steps.
Add the keycloak-js to the shares of module federation

Desired functionality.
I'd like to know if there's a way to share the keycloak instance to use widely the keycloak-angular and get all the features on the single microfrontends, firstly the AuthGuard.

msscsh · 2025-03-27T04:02:15Z

msscsh
Mar 27, 2025

I got the same issue with:

keycloak-angular ^14.0.0
keycloak-js 18.0.0

0 replies

Navigation Menu

Repository navigation

Angular Module Federation #14885

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Angular Module Federation #14885

Uh oh!

fraschizzato Oct 13, 2022

Replies: 1 comment

Uh oh!

msscsh Mar 27, 2025

fraschizzato
Oct 13, 2022

msscsh
Mar 27, 2025