MSAL Angular Wrapper is not passing protectedResourceMap when building --prod (with AOT)

[andersonferrari]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x ] Bug report  
[ ] Performance issue
[ ] Feature request
or [ x ] Documentation issue or request
[ ] Other... Please describe: 
*** it can be a bug or something missing in the documentation

All Browsers:

Library version

Library version: 0.2.2

Current behavior

We used angular cli to scaffold the project and when we run: ng build --prod and run the project... the protectedResouceMap Map JS object do not go to MSAL lib.
This behaviour do not occur with dev build (ng build)... only when AOT (ahead-of-time) compilation is active, which is the case when we include --prod

workaround:

• if a pass an array instead of a Map as protected resource map
  ex: export const protectedResourceMap = [[config.PathAPI, [config.B2cScope]]];
• and If a change from Map<string, Array> to Any (or array) here:
  . https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal-config.ts#L19
• and recreate the Map here:
  . https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.service.ts#L37
  . protectedResourceMap: new Map(config.protectedResourceMap),
  then it works (even with --prod /aot)

I have logged this question on stackoverflow, but I didn't get an answer until now:
https://stackoverflow.com/questions/51959376/msal-for-angular-preview-angular-webpack-aot-compilation-not-including-resourcem

Expected behavior

When we compile the project with AOT (--prod) it should pass the protectedResourceMap to MSAL (serialize statically the Map object... passing an array instead of a Map object workaround the problem, but does not look like a good solution)

Minimal reproduction of the problem with instructions

1. Scaffold a new Angular project with angular cli
2. Create a Javascript Map object to hold the protectedResourceMap (string with URL and array with scopes) as described in the documentation: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/README.md
3. add the protectedResourceMap into the ngModule declaration
4. run build for production... that will turn on AHEAD-OF-TIME/AOT compilation by default: ng build --prod
5. run your solution and login... login goes ok, but subsequent calls to APIs don't work.
   If you inspect the code, you will see AOT did not serialize protectedResourceMap along with the other parameters

If you need more info, please reach out to me...
let me know in case you find a way to bypass this problem
thank you very much!

[nehaagrawal]

@andersonferrari This is a know issue and we already have a fix for this and needs to be released. Map is not supported by AOT and hence the issue. I will update you here once I release this fix.

[andersonferrari]

Good to know about that! We will be waiting for this fix!
Thank you very much!!!

[nehaagrawal]

@andersonferrari Once we release the fix, you will need to pass the map as an array. Something like this :-

export const protectedResourceMap:[string, string[]][]=[ ['https://buildtodoservice.azurewebsites.net/api/todolist',['api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user']] , ['https://graph.microsoft.com/v1.0/me', ['user.read']] ];

[andersonferrari]

Great! that is pretty much the workaround that I've found and I think that can cover all cases (for protected and unprotected resources)! thank you!

[nehaagrawal]

Fixed and released in msal-angular 0.1.2. Please check the read me for how to use protectedResourceMap. I am closing it for now. Please reopen if the issue exists.

[ik1728]

Hi,
Current version of MSAL-Angular is 0.1.2
Angular Version : 6.1.6

Acquiring of Access Token is working in DEV but Not in PROD.

[adeshtc]

HI,
Environment -- dev
Am facing issue while calling my web api with bearer token. getting issue unauthorized access 401.
But able to call the graph api with token successfully.

msal angular version which am using is "@azure/msal-angular": "^0.1.2",

export const protectedResourceMap:[string, string[]][]=[ ['http://localhost:8133/api/FrameworkData/ReleaseManagement/GetAllFrameworkDetails',['api://d6d2dc96-6757-47f7-83bd-2212e5e9099d/access_as_user']], ['https://graph.microsoft.com/v1.0/me', ['user.read']] ];

Web api is registered and working fine with C# based web app with Oauth2.0 and openidConnect.
i get this issue when i call from my angular app.
implict grant flow is enabled

my module.ts

imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes,{useHash:true}) ,
MsalModule.forRoot({
clientID: 'b8b72473-3f78-4f5d-bf08-8a2e2a3d135e',
authority: "https://login.microsoftonline.com/26fa1297-1ee6-412a-a80a-cebf476ec6ad/",
validateAuthority: true,
redirectUri: "http://localhost:4200/",
cacheLocation : "localStorage",
//loadFrameTimeout:10000,
postLogoutRedirectUri: "http://localhost:4200/",
navigateToLoginRequestUrl: true,
popUp: false,
consentScopes: ["user.read", "api://d6d2dc96-6757-47f7-83bd-2212e5e9099d/access_as_user"],
unprotectedResources: ["https://www.microsoft.com/en-us/"],
protectedResourceMap: protectedResourceMap,
logger: loggerCallback,
correlationId: '1234',
level: LogLevel.Info,
piiLoggingEnabled: true
}
),
]

please help me. i stuck since 2 days.
Thanks in advance

[brijesh1ec]

HI,
Environment -- dev
Am facing issue while calling my web api with bearer token. getting issue unauthorized access 401.
But able to call the graph api with token successfully.

msal angular version which am using is "@azure/msal-angular": "^0.1.2",

export const protectedResourceMap:[string, string[]][]=[ ['http://localhost:8133/api/FrameworkData/ReleaseManagement/GetAllFrameworkDetails',['api://d6d2dc96-6757-47f7-83bd-2212e5e9099d/access_as_user']], ['https://graph.microsoft.com/v1.0/me', ['user.read']] ];

Web api is registered and working fine with C# based web app with Oauth2.0 and openidConnect.
i get this issue when i call from my angular app.
implict grant flow is enabled

my module.ts

imports: [
BrowserModule,
FormsModule,
HttpClientModule,
RouterModule.forRoot(appRoutes,{useHash:true}) ,
MsalModule.forRoot({
clientID: 'b8b72473-3f78-4f5d-bf08-8a2e2a3d135e',
authority: "https://login.microsoftonline.com/26fa1297-1ee6-412a-a80a-cebf476ec6ad/",
validateAuthority: true,
redirectUri: "http://localhost:4200/",
cacheLocation : "localStorage",
//loadFrameTimeout:10000,
postLogoutRedirectUri: "http://localhost:4200/",
navigateToLoginRequestUrl: true,
popUp: false,
consentScopes: ["user.read", "api://d6d2dc96-6757-47f7-83bd-2212e5e9099d/access_as_user"],
unprotectedResources: ["https://www.microsoft.com/en-us/"],
protectedResourceMap: protectedResourceMap,
logger: loggerCallback,
correlationId: '1234',
level: LogLevel.Info,
piiLoggingEnabled: true
}
),
]

please help me. i stuck since 2 days.
Thanks in advance

Please 1) add client application by exposing api,2) do run your api on localhost