skip to Main Content

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
enter image description here

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);
    }

2

Answers


  1. Chosen as BEST ANSWER

    My error was related to this part of the program that I showed in the photo

    enter image description here

    And it was related to the package that was mistakenly injected into the component that is used in the entire project


  2. I tried re-installing packages and that didn’t work, but when I did npm update all of a sudden the error went away.

    The reason for that being, that the packages were updated with a fix. I’m not sure which dependency caused this error in my app, but I hope it works for you too!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search