Microsoft-authentication-library-for-js: MSAL Angular Wrapper is not using protectedResourceMap when building with AOT

[ricey-cmd]

Library

• [x] [email protected]
• [x] @azure/[email protected]

Framework

Angular v8.1.0

Description

When building my project with AOT, it seems the protectedResourcesMap is not being picked up correctly by MSAL and is not appending the access token onto the Bearer header in the relevant http calls. I believe this is to do with the new use of adding this as a Map rather than an array which may not be supported by AOT.

A second issue is an error while attempting to setup the logger in the MSAL configuration in app.module with AOT.
When building the following error is thrown:

"Function calls are not supported in decorators but 'Logger' was called."

I understand this is the alpha version but I wanted to comment in order to raise awareness of the issue.

Thanks

[jasonnutter]

@ricey-cmd Thanks for the feedback, I'll take a look into this and let you know if I need further info.

[asanchezfe]

@ricey-cmd
We're having the logger working on AOT compilation with the same packages that you, try this configuration:

import { Logger } from 'msal';

export function MSALConfigFactory(config: ConfigService) {
  return {
    auth: {
     ...
    },
    cache: {
      ...
    },
    framework: {
      ....
    },
    system: {
      logger: new Logger(
        (logLevel, message, piiEnabled) => {
          console.log(message);
        },
        { level: 3 }
      )
    }
  };
}

[ricey-cmd]

@asanchezfe I tried this configuration and still getting the same issue. Seems it doesn't like the new Logger call. Same Error as before: 'Function calls are not supported in decorators but 'Logger' was called in 'MSALConfigFactory''

[asanchezfe]

@ricey-cmd What webpack, angular... are you using? We use aot, angular 8 and "@angular-builders/custom-webpack": "^8.4.0"

[Raysapps]

Executing 'ng build ---prod' with @azure/msal-angular 1.0.0-beta.1 version is giving an error "Function calls are not supported in decorators but 'Logger' was called in 'environment'".
I understand that this is a beta version but this is stopping me from publishing on to Azure. If anyone can please suggest a workaround, that'll be great.

[ricey-cmd]

@asanchezfe I am using angular 8, not sure what version of webpack. If you want I can strip back my project to a bare bones sample and put a link to it on github for you to look at.

[asanchezfe]

@ricey-cmd if you do, I can take a look. Don't know why, but we don't have this issue.

[marckassay]

@Raysapps you can omit the system object in the config:

        unprotectedResources,
        protectedResourceMap: new Map(protectedResourceMap)
      }/* ,
      system: {
        logger: new Logger(loggerCallback)
      } */
    },
      {
        popUp: !isIE,
        consentScopes: ['user.read', 'user.write', 'openid', 'offline_access'],

Strangely, simply just assigning undefined to logger results in run-time errors. So hence omitting system object.
Although it would be better to provide an 'alternative class provider'. But it seems that the way this Logger is being imported in msal, it is making it difficult to do so.

[jasonnutter]

I have put together a PR to address this: #1251. The PR includes updates to the new samples, showing proposed usage. Let me know if you have any feedback! Will work to get this release ASAP (at least as a beta that you can use with the new Angular wrapper).

[Raysapps]

@marckassay : Successfully built by omitting system object, but resulted in run time error in the browser console "ERROR TypeError: Cannot read property 'framework' of undefined"

[asanchezfe]

Hi guys,
have you tried to use a factory to pass the conf (@jasonnutter)? As I told previously, we are using AOT and Angular 8 without getting any error calling new Logger on a decorator, I think the key is that the call is not really on the decorator:

export function MSALConfigFactory(config: ConfigService) {
  return {
    auth: {
      ...
    },
    cache: {
      ...
    },
    framework: {
      ...
    },
    system: {
      logger: new Logger(
        (logLevel, message, piiEnabled) => {
          console.log(message);
        },
        { level: 3 }
      )
    }
  };
}

@NgModule({
  declarations: [AppComponent],
  imports: [...],
  providers: [
    { provide: MSAL_CONFIG, useFactory: MSALConfigFactory },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {}
}

[marckassay]

@asanchezfe thanks, I haven't applied your recommendation. Your initial post didn't included the second half of your previous post, which confused me on how it could of worked. In addition, I was exhausted at the time of discovering this issue and settled on the least cognitive intensive solution, which was to pull the object out of code.

But I believe your solution is correct. I found that error message was confusing, as I believe you mentioned too. The next day after reading thru NgRx docs which mentioned about this but, in the context of Reducers:

Note: The exported reducer function is necessary as function calls are not supported by the AOT compiler[My emphasis]. - ref

At that point I understood more about this limitation with AOT. And in that NgRx quote is a link (click here) to one of Angular's AOT docs.

[marckassay]

@Raysapps,

Cannot read property 'framework' of undefined

There is a 'framework' literal object which is one of 'system' siblings. I just recommended to remove the 'system' object. Perhaps you deleted 'framework' object?

[jasonnutter]

@ricey-cmd @Raysapps @marckassay Please update to [email protected] and @azure/[email protected], which has fixes for the issues with Logger, Map, and framework of undefined: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/5c616874cf81eded852b69618e2d53abb896ca41/lib/msal-angular/docs/0.x-1.x-upgrade-guide.md#adjustments-for-aot-mode

For Logger, you can now set logger dynamically by calling msalService.setLogger, instead of passing in the configuration.

For protectedResourceMap, that can now be passed as [string, string[]][] through the Angular-specific configuration object. See the links to the samples in the above upgrade guide.

@asanchezfe Thanks for the guidance on using a factory, we'll add that to our documentation.

Let me know if these new versions resolve your issues, thanks!