Unit testing fails with "Importing KeycloakAngularModule which does not have a ɵmod property"

[OysteinAmundsen]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search for issues before submitting
- [ ] feature request

Versions.

"keycloak-angular": "^8.3.0",
"keycloak-js": "^14.0.0",

Repro steps.

I have an auth.module which sets up keycloak according to your setup description. This works fine when I run the project, but unit tests for components comsuming the auth..module fails with the error message given in the title of this issue.

I am using Angular v12.1.3 with @nrwl/nx v12.6.2 and jest v27.0.6 to run my unit tests.

The log given by the failure.

    Importing KeycloakAngularModule which does not have a ɵmod property

      at ../../../packages/core/src/render3/jit/module.ts:493:13
          at Array.forEach (<anonymous>)
      at transitiveScopesFor (../../../packages/core/src/render3/jit/module.ts:486:30)
      at setScopeOnDeclaredComponents (../../../packages/core/src/render3/jit/module.ts:416:28)
      at Object.flushModuleScopingQueueAsMuchAsPossible [as ɵflushModuleScopingQueueAsMuchAsPossible] (../../../packages/core/src/render3/jit/module.ts:59:11)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.checkGlobalCompilationFinished (../../../packages/core/testing/src/r3_test_bed.ts:445:7)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.resetTestingModule (../../../packages/core/testing/src/r3_test_bed.ts:261:10)
      at Function.Object.<anonymous>.TestBedRender3.resetTestingModule (../../../packages/core/testing/src/r3_test_bed.ts:194:26)
      at ../../../packages/core/testing/src/test_hooks.ts:38:15
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at Object.wrappedFunc (../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

Desired functionality.

The above error message looks like it is connected to the angular ivy package? I deduce this from the reference to the missing ɵmod property. I would like to be able to test components which are depending on KeycloackAngularModule.

[jonkoops]

Can you share your module definition where you are adding Keycloak Angular?

[OysteinAmundsen]

Sure:

import { CommonModule } from '@angular/common';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { RouterModule } from '@angular/router';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { AuthGuard } from './auth.guard';
import { LogoutComponent } from '../logout.component';
import { AUTH_ENV, AUTH_TOKEN } from '../auth.token';

function initializeKeycloak(token: AUTH_ENV, keycloak: KeycloakService) {
  return () =>
    keycloak.init({
      config: {
        url: '/auth',
        realm: token.realm,
        clientId: token.clientId,
      },
      initOptions: {
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri: window.location.origin + '/assets/silent-check-sso.html',
      },
    });
}

@NgModule({
  declarations: [LogoutComponent],
  imports: [
    CommonModule,
    MatProgressSpinnerModule,
    RouterModule.forChild([{ path: 'logout', component: LogoutComponent, canActivate: [AuthGuard] }]),
    KeycloakAngularModule,
  ],
  exports: [LogoutComponent, KeycloakAngularModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [AUTH_TOKEN, KeycloakService],
    },
  ],
})
export class AuthModule {}

The AuthModule is then imported into my AppModule. Works fine in run-time, but not in Jest unit-tests.

EDIT: I created a small project which illustrates this error: https://github.com/OysteinAmundsen/keycloak-angular_issue_346

Clone this, npm install and npm test to see the error.

The project is created using the following commands:

1. npx create-nx-workspace suite
2. cd into workspace
3. npm i keycloak-angular keycloak-js -S
4. npm run nx generate @nrwl/angular:library shared

keycloak auth.module is added under libs/shared/src/lib/auth app init under apps/suite/src/app/

[OysteinAmundsen]

Am I doing it wrong? Any feedback would be appreciated.

[Clashsoft]

It's an Angular issue. Did you try to re-run the test command?