msal library breaks angular translations

[satyavanu]

Hi,

I have an angular 10 application, that uses ng translate, and lately, I have integrated with msal module, and strangely ng translate breaks, and if this known issue and fix is there?

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ErrorHandler } from '@angular/core';

import { ReactiveFormsModule } from '@angular/forms';
import {
  HttpClientModule,
  HttpClient,
  HTTP_INTERCEPTORS,
} from '@angular/common/http';
import { HttpConfigInterceptor } from './shared/http-interceptor';

import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MsalApplicationModule } from './msal.module';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MaterialModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    }),
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    ServiceWorkerModule.register('ngsw-worker.js', {
      enabled: environment.production,
    }),
    BrowserAnimationsModule,
    MsalApplicationModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

package.json:

"@azure/msal-angular": "^1.1.2",
  "msal": "^1.4.4",

and for MsalApplicationModule i used the same code example

const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsalModule.forRoot({
      auth: {
        clientId: 'Enter_the_Application_Id_here', // This is your client ID
        authority: 'Enter_the_Cloud_Instance_Id_Here'/'Enter_the_Tenant_Info_Here', // This is your tenant ID
        redirectUri: 'Enter_the_Redirect_Uri_Here'// This is your redirect URI
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    }, {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

[jo-arroyo]

@satyavanu Please see this comment for how to mitigate this issue: #2515 (comment).

Also, in the future, please use one of our pre-configured issue templates, thanks!

[satyavanu]

@jo-arroyo that's very confusing. you have const protectedResourceMap: [string, string[]][] and you are passing ["/assets/i18n/*.json", null] on #2515 https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/2515#issuecomment-727108424. the tying is wrong, and next this is still not working, does latest msal support ng translate ?

[jo-arroyo]

@satyavanu Have you tried without the leading slash, i.e. ["assets/i18n/*.json", null]?

In regards to typing, do you have strict null checks on in your tsconfig?

Please also consider upgrading to @azure/msal-angular@2, where we don't expect this to be an issue anymore.

[github-actions[bot]]

This issue has not seen activity in 14 days. It will be closed in 7 days if it remains stale.

[github-actions[bot]]

This issue has been closed due to inactivity. If this has not been resolved please open a new issue. Thanks!