Importing MsalModule which does not have a ɵmod property

[Venators]

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.37.0

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.5.7

Public or Confidential Client?

Public

Description

Hello 👋🏻

I've recently upgraded from Angular 12 to 13, which broke the Jest test for AppComponent, with the errors centring on MSAL. I updated @azure/msal-angular and @azure/msal-browser to their latest v2 packages, but this made no difference. I looked up the angular13-rxjs7-sample-app and aligned my app.component.spec.ts with that of the sample app - this helped to solve the initial error I was facing (NG0204: Can't resolve all parameters for MsalService: (?, ?).) but has thrown (Importing MsalModule which does not have a ɵmod property) instead, and this error I can't shake.

Importing MsalModule which does not have a ɵmod property

  10 |   beforeEach(waitForAsync(() => {
> 11|     TestBed.configureTestingModule({
     |             ^
  12|       imports: [
  13|         RouterTestingModule,
  14|         AppModule`

Has anyone encountered this, and/or could shed some light on how I resolve this?

MSAL Configuration

{ 
auth: {
      clientId: {{ClientId}},
      authority: 'https://' + {{TenantId}} + '.b2clogin.com/' + {{TenantId}} + '.onmicrosoft.com/' + {{Policy}},
      knownAuthorities: [{{TenantId}} + '.b2clogin.com'],
      redirectUri: {{RedirectUri}},
      postLogoutRedirectUri: {{RedirectUri}},
      navigateToLoginRequestUrl: true
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: false,
    }
}

Relevant Code Snippets

import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        AppModule
      ],
      declarations: [
        AppComponent
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

Identity Provider

Azure B2C Basic Policy

Source

External (Customer)

[lalimasharda]

Hey @Venators! Can you share your app.module.ts code where you are setting up the NgModule?

[Venators]

Hi @lalimasharda,
I sure can!

export function MSALConfigFactory(): IPublicClientApplication  {
  return new PublicClientApplication({ 
auth: {
      clientId: {{ClientId}},
      authority: 'https://' + {{TenantId}} + '.b2clogin.com/' + {{TenantId}} + '.onmicrosoft.com/' + {{Policy}},
      knownAuthorities: [{{TenantId}} + '.b2clogin.com'],
      redirectUri: {{RedirectUri}},
      postLogoutRedirectUri: {{RedirectUri}},
      navigateToLoginRequestUrl: true
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: false,
    }
});
}

export function initializeApp(appConfig: AppConfig) {
  const promise = appConfig.load().then(() => {
    if (AppConfig.settings) {
      const appInsights = new ApplicationInsights({
        config: {
          instrumentationKey: AppConfig.settings.appInsights.instrumentationKey,
          enableAutoRouteTracking: true
        }
      });
      appInsights.loadAppInsights();
      appInsights.trackPageView();
      AppConfig.appMonitor = appInsights;
    }
  });
  return () => promise;
}

@NgModule({
  declarations: [
    AppComponent,
    LoaderComponent,
    ForbiddenComponent,
    ErrorSnackBarComponent,
    AppContainerComponent,
    ReportContainerComponent,
    InfoSnackBarComponent,
    DialogEditPreferencesComponent,
    SuccessSnackBarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatButtonModule,
    MatToolbarModule,
    MatProgressBarModule,
    NoopAnimationsModule,
    MatIconModule,
    MatCardModule,
    MatSnackBarModule,
    MatDialogModule,
    MatSelectModule,
    ReactiveFormsModule,
    MsalModule,
    NgxEditorModule
  ],
  providers: [
    ActivationGuardService,
    LoaderService,
    AppConfig,
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [AppConfig],
      multi: true
    },
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALConfigFactory,
      deps: [AppConfig]
    },
    MsalService,
    MsalBroadcastService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      deps: [MsalService],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptor,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ErrorInterceptor,
      deps: [MsalService, Router, MatSnackBar],
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: DatePropertiesInterceptor,
      multi: true
    },
    { provide: LOCALE_ID, useValue: 'en-NZ' },
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule {
  constructor(library: FaIconLibrary) {
    library.addIcons(fasStar, farStar);
  }
}

[lalimasharda]

Thanks. I dont think there are any issues with the app.module.ts file. I did look into some of our older issues (#5336 and #4298), and it seems some people have reported that they were seeing this error with esbuild but it went away with the standard build. Does that workaround work for your case?

[Venators]

Good to rule out the app.module.ts file! I looked at those older issues prior to logging my issue but didn't think there was a solution there as I believe I'm already using the standard build?

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",

[jo-arroyo]

@Venators Can I confirm what version of Angular and RxJS you are using?

[Venators]

Hi @jo-arroyo,
When I opened the thread, I was running on Angular 13.4.0 and RxJS 7.5.6.
Just yesterday, I upgraded to Angular 14.3.0 (still on RxJS 7.5.6, though), and the issue persists.
I have these combinations on two separate branches, so I can check details for you in either if required.

[jo-arroyo]

@Venators Unfortunately, this may be related to Ivy incompatibility with our v2 library. Our alpha version for MSAL Angular has been released, could you please try upgrading to Angular 15 and trying it with our latest alpha version of MSAL Angular?

[ghost]

@Venators This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.

[Venators]

I've branched my app and upgraded Angular to v15, and upgraded @azure/msal-angular & @azure/msal-browser to 3.0.0-alpha.2, and I can confirm that the tests pass.

I'm assuming the alpha packages are not production suitable and that the mix of Angular 15 and the alpha packages working means there'll be no fix for an Angular 14/v2 package mix? Is there a timeline on when the packages will move out of alpha?

[ghost]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @jo-arroyo please follow up.

[ghost]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @jo-arroyo please follow up.

[ghost]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @jo-arroyo please follow up.

[ghost]

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @jo-arroyo please follow up.

[tnorling]

@Venators Yes, you're correct - the v2 package will not be updated to support Ivy. The v3 package is now in beta, we have not yet committed to a timeline to move out of beta but you can track #5410 for updates on that.

Closing as it sounds like this is now understood/resolved, let us know if you have further questions. Thanks!