'MsalModule' does not appear to be an NgModule class

[rafagsiqueira]

Core Library

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

Core Library Version

2.28.1

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

2.4.1

Public or Confidential Client?

Public

Description

Cannot build angular library which imports MsalModule.

Error Message

• Compiling with Angular sources in Ivy partial compilation mode.
  ✖ Compiling with Angular sources in Ivy partial compilation mode.
  projects/etips-utils/auth/src/auth.module.ts:51:5 - error NG6002: 'MsalModule' does not appear to be an NgModule class.

51 MsalModule
~~~~~~~~~~

node_modules/@azure/msal-angular/msal.module.d.ts:5:22
5 export declare class MsalModule {
~~~~~~~~~~
This likely means that the library (@azure/msal-angular) which declares MsalModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Msal Logs

No response

MSAL Configuration

export function msalInstanceFactory(authConfig: BrowserAuthOptions) {
  return new PublicClientApplication({
    auth: authConfig,
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: false
    }
  });
}

Relevant Code Snippets

import {
  MsalBroadcastService,
  MsalGuard,
  MsalGuardConfiguration,
  MsalInterceptorConfiguration,
  MsalInterceptor,
  MsalModule,
  MsalService,
  MSAL_GUARD_CONFIG,
  MSAL_INSTANCE,
  MSAL_INTERCEPTOR_CONFIG
} from '@azure/msal-angular';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthService } from './auth.service';
import { TransparentTextDirective } from './login/transparent-text.directive';

export function msalInstanceFactory(authConfig: BrowserAuthOptions) {
  return new PublicClientApplication({
    auth: authConfig,
    cache: {
      cacheLocation: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: false
    }
  });
}

@NgModule({
  declarations: [LoginComponent, LogoutComponent, TransparentTextDirective],
  imports: [
    CommonModule,
    ResponsiveModule,
    IconsModule,
    MatCardModule,
    MatButtonModule,
    HttpClientModule,
    MsalModule
  ]
})
export class AuthModule {
  static forRoot(
    authConfig: BrowserAuthOptions,
    interceptorConfig: MsalInterceptorConfiguration,
    guardConfig: MsalGuardConfiguration,
  ): ModuleWithProviders<AuthModule> {
    return {
      ngModule: AuthModule,
      providers: [
        {
          provide: HTTP_INTERCEPTORS,
          useClass: MsalInterceptor,
          multi: true
        },
        {
          provide: MSAL_INSTANCE,
          useFactory: () => msalInstanceFactory(authConfig)
        },
        {
          provide: MSAL_GUARD_CONFIG,
          useValue: guardConfig
        },
        {
          provide: MSAL_INTERCEPTOR_CONFIG,
          useValue: interceptorConfig
        },
        MsalService,
        MsalGuard,
        MsalBroadcastService,
        AuthService
      ]
    };
  }
}

angular.json:
(...)
"build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "tsConfig": "projects/etips-utils/tsconfig.lib.json",
            "project": "projects/etips-utils/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/etips-utils/tsconfig.lib.prod.json"
            }
          },
          "defaultConfiguration": "production"
        }
(...)
tsconfig.json:
(...)
    "target": "es2020",
    "module": "es2020",
(...)

Reproduction Steps

1. Create a library that imports MsalModule
2. Compile library using ng build and @angular-devkit/build-angular:ng-packagr

Expected Behavior

Library should build successfully.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[bmahall]

@rafagsiqueira Thanks for opening this issue. What version of Angular are you using?

[rafagsiqueira]

@bmahall thank you for looking into it. I am on version 14.2.0.

[bmahall]

@rafagsiqueira Can you try the following steps in sequence and let me know if this fixes the error you are getting:-

1. Delete node_modules and reinstall all dependencies using npm install
2. Add the following line in tsconfig.json:-
   "importHelpers": true
3. Check that you are including all the relevant imports in your code file, including import { NgModule } from '@angular/core';
4. Restart the TS server and run "ng build"

Also unrelated to the error, you need to assign a return type to the function msalInstanceFactory.

[rafagsiqueira]

@bmahall we solved the issue. It seems related to the docker context. We are now building the library directly on the build agent and copying it to the docker image already built.