Bearer token 401 authorization error from Angular5 APP to .Net 4.7 back-end API - angular5

Question

Working with Angular 5 on in our app, we are authenticating through the Azure Active Directory(AAD), getting a bearer token to access the backend API. We are not having any success in the athentication call to the backend api, getting a 401 unauthrized. Both App and Api is hosted in Azure. Any help would be appreciated in troubleshooting this issue:
The App service Registration on AAD:
Angular App (using the adal-angular5 1.0.36 library):
Application ID: aaaaa-aaaaa-aaaaa-aaaaa-aaaaa
Object ID: bbbbbb-bbbbb-bbbb-bbbbb-bbbbbb
App ID URI: https://frontendapp.azurewebsites.net
Home Page URL: https://homepage.frontendapp.com
Backend API (.Net 4.7):
Application ID: cccccc-cccccc-cccccc-cccccc-cccccc
Object ID: dddddd-ddddd-ddddd-dddddd-dddddd
App ID URI: https://backendapi.azurewebsites.net
Home Page URL: https://homepage.backendapi.com
App side
config for adal-angular5 on the Angular App:
config: adal.Config = {
tenant: 'common',
clientId: 'aaaaa-aaaaa-aaaaa-aaaaa-aaaaa',
postLogoutRedirectUri: window.location.origin,
endpoints: {
ApiUri: "https://homepage.backendapi.com",
}
};
Call to get the bearer token:
this.adal5Service.acquireToken("https://backendapi.azurewebsites.net")
call to the api
we verified the options contains the header which has the bearer token:
this.adal5HttpService.get('/api/hello', options);
On the API side
we are using the Microsoft Owin library (Microsoft.Owin 4.0.0 nuget package),
API startup:
public partial class Startup
{
/// <summary>
/// Initializes OWIN authentication.
/// </summary>
/// <param name="app">Web API AppBuilder</param>
public void Configuration(IAppBuilder app)
{
if (app == null)
{
throw new ArgumentNullException("app");
}
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
new WindowsAzureActiveDirectoryBearerAuthenticationOptions
{
Tenant = "common",
Audience = "https://backendapi.azurewebsites.net"
});
}
}
API side controler
[HttpGet]
[Authorize]
[Route("hello")]
public string GetHello()
{
try
{
var result = "we hit it yay!!!!!!!!!!!!!!!";
return result;
}
catch (Exception ex)
{
var msg = "not hit saddd.....";
var error = new Exception(msg, ex);
throw error;
}
}
With the [Authorize] attribute we are getting a 401 unauthorized, with no additional error message.
Without the [Authorize] attribute we are hitting the Controller method just fine and getting the return results.
I was able to confirm the bearer token that's sent from the App is indeed the bearer token we get in the header in our Api. I can't figure out why we are getting the unauthorized.
Is the config setting in correct on the APP or the API side?
Is there additional configuration needed in Azure?
Any help would be appreciate it!