Error: The selector "app-redirect" did not match any elements, I am trying to upgrade to MSAL v2 and obtain refresh token

[Console error

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { SharedModule } from './shared/shared.module'

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSidenavModule } from '@angular/material/sidenav';
import { HeaderComponent } from './header/header.component';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {MatExpansionModule} from '@angular/material/expansion';

import { HTTPRequestInterceptorProviders } from 'src/app/helpers/http-interceptor';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import { ADFSDeloitteModule } from 'src/app/shared/modules/adfs-deloitte.module';
import { APP_CONSTANTS } from 'src/app/shared/config/app.constants';
import { MatSelectModule } from '@angular/material/select';
import { MsalBroadcastService, MsalGuard, MsalInterceptor, MsalModule, MsalRedirectComponent, MsalService } from '@azure/msal-angular';
import { BrowserCacheLocation, InteractionType, PublicClientApplication } from '@azure/msal-browser';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatExpansionModule,
    MatSelectModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),    
    // ADFSDeloitteModule.forRoot(APP_CONSTANTS.adfsConfig),
    MsalModule.forRoot( new PublicClientApplication({ // MSAL Configuration
      auth: APP_CONSTANTS['msalConfig']['auth']
          //clientId: "f61132d9-dcdb-4be6-b7e2-ee934a8442c2",
          // clientId: APP_CONSTANTS['adfsConfig']['clientId'],
          // authority: "https://login.microsoftonline.com/36da45f1-dd2c-4d1f-af13-5abe46b99921/",
          // redirectUri: 'https://kineticweb-dev.snetacloud.com/',
          // postLogoutRedirectUri: 'https://kineticweb-dev.snetacloud.com/',
          
      ,
      cache: {
          cacheLocation : BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: true, // set to true for IE 11

      },
      system: {
          loggerOptions: {
              loggerCallback: () => {},
              piiLoggingEnabled: false
          }
      }
  }), {
      interactionType: InteractionType.Redirect, // MSAL Guard Configuration
      authRequest: {
        scopes: ['user.read']
      }
  }, {
      interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
      protectedResourceMap: new Map([
          ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ])
  })
  ],
  providers: [
    HTTPRequestInterceptorProviders,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
  ],
  bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule { }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Kinetic Finance Startup</title>
  <base href="/">
  <meta http-equiv=”Cache-Control” content=”no-cache, no-store, must-revalidate” />
  <meta http-equiv=”Pragma” content=”no-cache” />
  <meta http-equiv=”Expires” content='0' />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest" href="manifest.webmanifest">

  <meta name="theme-color" content="#1976d2">
</head>
<body>
  <app-root></app-root>
  <app-redirect></app-redirect> 
  <noscript>Please enable JavaScript to continue using this application.</noscript>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</body>
</html>

][1] I am trying to obtain refresh token via acquireTokenSilent in MSAL.But it is giving me this error when I try to run it. I have checked the documentation, nothing helps.I have also implemented handleRedirectObservable by bootstrapping MsalRedirectComponent. [1]: https://i.sstatic.net/G32yv.png

Recommended topics

Hot tags