oidc config not working when upgrading to v12 angular

i'm currently upgrading the angular version to v12 and the oidc config is not working or not able to redirect to the login page. below is the app.module.ts file the comment out code is how we use the config in v11

import { CommonModule } from '@angular/common';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { APP_INITIALIZER, Injector, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
AuthModule,
LogLevel,
OidcConfigService,
OidcSecurityService,
OpenIdConfiguration,
} from 'angular-auth-oidc-client';
import { NgDynamicBreadcrumbModule } from 'ng-dynamic-breadcrumb';
import { AddressCompareComponent } from './address-compare/address-compare.component';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthorizationGuard } from './authorization.guard';
import { AutoLoginComponent } from './auto-login/auto-login.component';
import { SimpleConfirmationDialogComponent } from './common/simple-confirmation-dialog.component';
import { SnackBarComponent } from './common/snack-bar.component';
import { TitleTranslationsCardComponent } from './common/title-translations-card.component';
import { TreeNodeComponent } from './common/tree-node.component';
import { TwoCollapsiblePanelsComponent } from './common/two-collapsible-panels.component';
import { DashboardInsuredComponent } from './dashboard-insured/dashboard-insured.component';
import { DashboardLocationComponent } from './dashboard-location/dashboard-location.component';
import { DashboardTasksComponent } from './dashboard-tasks/dashboard-tasks.component';
import { PendingHandoverComponent } from './dashboard-tasks/pending-handover/pending-handover.component';
import { TaskDetailsComponent } from './dashboard-tasks/pending-handover/task-details/task-details.component';
import { PendingTasksComponent } from './dashboard-tasks/pending-tasks/pending-tasks.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ForbiddenComponent } from './forbidden/forbidden.component';
import { HeaderBarComponent } from './header/header-bar.component';
import { InsuranceCaseComponent } from './insurance-case/insurance-case.component';
import { InsuranceSearchComponent } from './insurance-search/insurance-search.component';
import { AddEditnewLocationComponent } from './insurance/add-edit-new-location/add-edit-new-location.component';
import { InsuranceLocationComponent } from './insurance/insurance-location/insurance-location.component';
import { LocationFilterComponent } from './insurance/location-filter/location-filter.component';
import { LogComponent } from './log/log.component';
import { DemoMaterialModule } from './material-module';
import { ReportsEditFormComponent } from './reports/reports-edit-form/reports-edit-form.component';
import { ReportsComponent } from './reports/reports.component';
import { KeynewIndicatorComponent } from './new/key-new-indicator.component';
import { newIndicatorComponent } from './new/new-indicator.component';
import { newTreeTemplateDetailComponent } from './new/new-tree-template-detail/new-tree-template-detail.component';
import { newTreeTemplateFormComponent } from './new/new-tree-template-form/new-tree-template-form.component';
import { newTreeTemplateComponent } from './new/new-tree-template/new-tree-template.component';
import { newTreeComponent } from './new/new-tree.component';
import { newTreesComponent } from './new/new-trees.component';
import { APIInterceptor } from './service/baseUrlInterceptor.service';
import { CommonService, OidcConfig } from './service/common.service';
import { DataService } from './service/data.service';
import { SharedStateFullModule } from './shared-state-full/shared-state-full.module';
import { SharedModule } from './shared/shared.module';
import { TabDirectiveAutoCompleteDirective } from './tab-directive-auto-complete.directive';
import { TitleTranslateDirective } from './title-translate.directive';
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
import { EditIndustryTemplateComponent } from './edit-industry-template/edit-industry-template.component';

// export function oidcConfigServiceFactory(
// oidcConfigService: OidcConfigService,
// commonService: CommonService
// ) {
// return async () => {
// await commonService.init();
// const config = commonService.getAppConfig().oidcConfig;
// return oidcConfigService.withConfigs({
// authority: config?.stsServer,
// authWellknownEndpoint: config?.authWellknownEndpoint,
// redirectUrl: window.location.origin,
// clientId: config?.clientId,
// scope: `${config?.scope} offline_access`,
// responseType: 'code',
// triggerAuthorizationResultEvent: true,
// postLogoutRedirectUri: `${window.location.origin}/unauthorized`,
// startCheckSession: false,
// silentRenew: true,
// silentRenewUrl: window.location.origin + '/silent-renew.html',
// postLoginRoute: '/home',
// forbiddenRoute: '/forbidden',
// unauthorizedRoute: '/unauthorized',
// logLevel: LogLevel.Warn,
// historyCleanupOff: true,
// useRefreshToken: true,
// autoUserinfo: false,
// renewTimeBeforeTokenExpiresInSeconds: 60,
// maxIdTokenIatOffsetAllowedInSeconds: 600,
// ignoreNonceAfterRefresh: true,
// });
// };
// }

const oidcConfiguration = () => {
let commonService: CommonService;
commonService.init();

return commonService.getAppConfig().oidcConfig;
}


export let AppInjector: Injector;

@NgModule({
declarations: [
TwoCollapsiblePanelsComponent,
HeaderBarComponent,
AppComponent,
newTreesComponent,
newTreeComponent,
KeynewIndicatorComponent,
newIndicatorComponent,
TreeNodeComponent,
TitleTranslationsCardComponent,
LogComponent,
SimpleConfirmationDialogComponent,
SnackBarComponent,
DashboardComponent,
InsuranceCaseComponent,
InsuranceLocationComponent,
AddEditnewLocationComponent,
LocationFilterComponent,
TitleTranslateDirective,
TabDirectiveAutoCompleteDirective,
AutoLoginComponent,
ForbiddenComponent,
UnauthorizedComponent,
newTreeTemplateComponent,
newTreeTemplateDetailComponent,
newTreeTemplateFormComponent,
AddressCompareComponent,
InsuranceSearchComponent,
DashboardLocationComponent,
DashboardInsuredComponent,
DashboardTasksComponent,
TaskDetailsComponent,
PendingTasksComponent,
PendingHandoverComponent,
ReportsComponent,
ReportsEditFormComponent,
EditIndustryTemplateComponent,
],
imports: [
CommonModule,
BrowserModule,
HttpClientModule,
AuthModule.forRoot({
config: {
authority: oidcConfiguration()?.stsServer, // Use dynamic config here
authWellknownEndpointUrl: oidcConfiguration()?.authWellknownEndpoint,
redirectUrl: window.location.origin,
clientId: oidcConfiguration()?.clientId,
scope: `${oidcConfiguration()?.scope} offline_access`,
responseType: 'code',
triggerAuthorizationResultEvent: true,
postLogoutRedirectUri: `${window.location.origin}/unauthorized`,
startCheckSession: false,
silentRenew: true,
silentRenewUrl: window.location.origin + '/silent-renew.html',
postLoginRoute: '/home',
forbiddenRoute: '/forbidden',
unauthorizedRoute: '/unauthorized',
logLevel: LogLevel.Warn,
historyCleanupOff: true,
useRefreshToken: true,
autoUserInfo: false,
renewTimeBeforeTokenExpiresInSeconds: 60,
maxIdTokenIatOffsetAllowedInSeconds: 600,
ignoreNonceAfterRefresh: true,
},
}),
AppRoutingModule,
BrowserAnimationsModule,
DemoMaterialModule,
NgDynamicBreadcrumbModule,
FormsModule,
ReactiveFormsModule,
SharedModule,
SharedStateFullModule,
],

providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
DataService,
OidcSecurityService,
OidcConfigService,
{
provide: APP_INITIALIZER,
useFactory: oidcConfiguration,
deps: [OidcConfigService, CommonService],
multi: true,
},
AuthorizationGuard,
{
provide: HTTP_INTERCEPTORS,
useClass: APIInterceptor,
multi: true,
},
],
bootstrap: [AppComponent],
})
export class AppModule {
constructor(private injector: Injector) {
AppInjector = this.injector;
}
}


the error on the console that I'm getting

main.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'init')


I'm new to angular and unable to resolve this I followed this migration guide migration guide

but unable to resolve the error

init method

init() {
console.log('Loading application configuration');
return this.httpClient
.get<AppConfig>('./config.json')
.toPromise()
.then((config) => {
this.appConfig = config;
});


}

Continue reading...