Azure Аутентификация Active Directory в приложении angular

Question

Я работаю над приложением angular, имеющим серверную часть веб-API. Я хочу аутентифицировать мое приложение angular с Azure AD.

Я зарегистрировал приложение в Azure AD и установил URI перенаправления и выбрал токен доступа. в приложении angular я использую microsoft-adal-angular6 для получения токена доступа. после входа пользователя я хочу перенаправить на HomeComponent, а затем использовать токен доступа для использования моего веб-интерфейса API. проблема в том, что после входа пользователя через страницу входа Microsoft он перенаправляет на пустую страницу, которая отличается от моих веб-страниц. Мой app.mudule.ts выглядит следующим образом:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MsAdalAngular6Module.forRoot({  
      tenant: 'xxxxx-8aca-xxxx-9191-xxxxx',  
      clientId: 'xxxxx-d8c9-xxxx-95b4-xxxxxx',  

      redirectUri: 'https://xxxxxx/.auth/login/aad/callback',  
      endpoints: { 
        'https://xxxxx/api/': 'xxx-45d7-xxxx-9bc2-xxxxxxx', 
      },  
      navigateToLoginRequestUrl: false,  
       cacheLocation: 'localStorage',  

    })
  ],
  providers: [AuthenticationGuard],
  bootstrap: [AppComponent]

app-routing.module.ts выглядит следующим образом:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthenticationGuard} from 'microsoft-adal-angular6'
import { HomeComponent } from './home/home.component';
import { AppComponent } from './app.component';

const routes: Routes = [
  { path: '', component: AppComponent, pathMatch: 'full' ,canActivate: [AuthenticationGuard]},
  {path: 'Home',component: HomeComponent} 

];

@NgModule({
  providers: [AuthenticationGuard],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],

})
export class AppRoutingModule { }

компонент приложения выглядит следующим образом:

import { Component } from '@angular/core';
import { MsAdalAngular6Service } from 'microsoft-adal-angular6';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ClientApp';
  accessToken:string;
  constructor(private adalService: MsAdalAngular6Service){ 


    console.log(this.adalService.userInfo);
    this.adalService.acquireToken('https://graph.microsoft.com').subscribe((token: string) => {
      console.log(token);
    });
   }

а вот мой домашний компонент:

import { Component, OnInit } from '@angular/core';
import { MsAdalAngular6Service } from 'microsoft-adal-angular6';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  accessToken:string;
  public userName:string;

  constructor(private adalService: MsAdalAngular6Service) { }

  ngOnInit(): void {

        this.adalService.handleCallback();

  }

}