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

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!