Error: ASSERTION ERROR: token must be defined [Expected=> null != undefined <=Actual]

I just ran into this error I have not done anything special in the project except that I have used oidc(openId) for authentication, And I have encountered this error.

I changed the bootstrap project for some reason But the first component that is running is the home-main component which codes in which config openId is also done

The error image that is printed in the console

Home-main component code

import { Component, Injector, OnInit } from '@angular/core';
import { AppComponentBase } from '../utils';
import { StorageService } from '../services/storage.service';
import { Title } from '@angular/platform-browser';
import { UserManagementService } from '../pages/user-management/user-management.service';
import { AbpService } from '../config/abp/licalization.service';
import { OAuthService } from 'angular-oauth2-oidc';
import { DataService } from '../services/data.service';
import { environment } from 'src/environments/environment.prod';
import { filter, map } from 'rxjs';
import { authCodeFlowConfig } from '../config/authCodeFlowConfig';
import { IApplicationConfigurationDto } from '../models/identityTypes';

@Component({
selector: 'app-home-main',
templateUrl: './home-main.component.html',
styleUrls: ['./home-main.component.scss'],
})
export class HomeMainComponent extends AppComponentBase implements OnInit {

loadFirstLoginProject: boolean = false;
favIcon: HTMLLinkElement = document.querySelector('#favIcon');
favIconAddress: string = environment.localization.favIcon_Project;

constructor(inject: Injector, private storageService: StorageService, private titlePage: Title, private userManagementService: UserManagementService, private _abpService: AbpService,
private dataService: DataService, private _oAuthService: OAuthService) {
super(inject)
this.getConfigProject();
this._oAuthService.configure(authCodeFlowConfig);
this._oAuthService.loadDiscoveryDocumentAndLogin();
this._oAuthService.setupAutomaticSilentRefresh();
this._oAuthService.events.pipe(filter((e) => e.type === 'token_received')).subscribe((_) => {
if (!this.loadFirstLoginProject) {
window.location.reload();
}
});
const lang = this.getCurrentLang();
if (lang === 'ku') {
document.body.classList.add('ku-language');
}
this.titlePage.setTitle(environment.localization.nameTitleProject)
this.favIcon.href = this.favIconAddress;
}

getConfigProject() {
if (this.storageService.retrieve('access_token')) {
this.loadFirstLoginProject = true;
}
}

public OnInit(): void {
this.dataService.getApplication().pipe(map((response: IApplicationConfigurationDto) => {
this.translate.setDefaultLang(response.setting.values['Abp.Localization.DefaultLanguage'].replaceAll('"', ''));
this.translate.use(response.setting.values['Abp.Localization.DefaultLanguage'].replaceAll('"', ''));
this.securityService.subjectUpdateUserByToken.next(response);
this._abpService.init(response);
this._abpService.setCurrentLang(response.setting.values['Abp.Localization.DefaultLanguage'].replaceAll('"', ''));
sessionStorage.setItem('currentLang', response.setting.values['Abp.Localization.DefaultLanguage']);
this.securityService.updateSubjectUserByToken(response);
this.securityService.currentUser = response.currentUser;
localStorage.setItem('photoUserImage', this.convertAddressImageUser(''));
if (this._oAuthService.hasValidAccessToken()) {
this.userManagementService.getAllUsers('', 0, 999).subscribe(x => {
this.securityService.userList = x.items.map(x => {
x.fullName = `${x.name} ${x.surname}`
return x;
});
this.securityService.currentUser = response.currentUser;
}, error => {
console.log(error)
});
this.securityService.dataApplicationService = response;
return true
}

return false;
}, err => err));
}

}


package.json

"private": true,
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"angular-oauth2-oidc": "^15.0.1",
"bootstrap": "^5.3.2",
"font-awesome": "^4.7.0",
"html-to-image": "^1.11.11",
"html-to-pdfmake": "^2.5.1",
"jalali-moment": "^3.3.11",
"jspdf": "^2.5.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"ngx-persian": "^2.0.1",
"ngx-spinner": "^16.0.2",
"ngx-toastr": "^17.0.2",
"primeicons": "^6.0.1",
"primeng": "^16.9.1",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.1",
"@angular/cli": "~16.2.1",
"@angular/compiler-cli": "^16.2.0",
"@angular/localize": "^16.2.12",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3"
}


app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainRootComponent } from './main-root/main-root.component';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { SharedModule } from './shared/shared.module';
import { APP_BASE_HREF } from '@angular/common';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { StorageService } from './services/storage.service';
import { DataService } from './services/data.service';
import { SecurityService } from './services/security.service';
import { ToastrModule, ToastrService } from 'ngx-toastr';
import { OAuthModule } from 'angular-oauth2-oidc';
import { MessageService } from 'primeng/api';
@NgModule({
declarations: [
AppComponent,
MainRootComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule,
HttpClientModule,
ToastrModule.forRoot(),
OAuthModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
],
bootstrap: [MainRootComponent],
providers: [
{ provide: APP_BASE_HREF, useValue: '/' },
StorageService,
ToastrService,
MessageService,
DataService,
SecurityService
],
})
export class AppModule { }
export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http);
}

Continue reading...