TypeError: Cannot read properties of undefined (reading 'baseURL') Getting this error even-CodePudding

I am getting the above error. I am new to angular. Please help me understand what the error is and the solution for it too.I am trying to test this component but getting the error.

VesselManagementGuard.ts

import { Injectable } from '@angular/core';
import { Resolve} from '@angular/router';
import { VesselManagementService } from '../services/vessel-management.service';

@Injectable({
  providedIn: 'root'
})
export class VesselManagementGuard implements Resolve<any> {
  constructor(public vesselManagementService: VesselManagementService) { }
  resolve() {
     return this.vesselManagementService.getvesselManagement()
  }
  
}

VesselManagementGuard.spec.ts

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { MatDialogRef } from '@angular/material/dialog';

import { VesselManagementGuard } from './vessel-management.guard';
import { CognitoService } from 'src/app/modules/auth/cognito.service';


describe('VesselManagementGuard', () => {
  let guard: VesselManagementGuard;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        {
           provide: MatDialogRef,
           CognitoService,
           useValue: {
               getConfig: () => ({ 
                 baseUrl: 'any',         //Added mock of the service here still getting the error
                 serviceBase: 'any'
               })
           }
        }
     ],
    });
    guard = TestBed.inject(VesselManagementGuard);
  });

  it('should be created', () => {
    expect(guard).toBeTruthy();
  });
});

vessel.management.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/internal/Observable';
import { CognitoService } from 'src/app/modules/auth/cognito.service';
import { AppConfigService } from 'src/app/services/config/app-config.service';

@Injectable({
  providedIn: 'root',
})
export class VesselManagementService {
  baseURL: any;
  serviceBase: any;
  userEmail:string='';
  constructor(
    private httpClient: HttpClient,
    private configService: AppConfigService,
    private cognitoService: CognitoService
  ) {
    this.baseURL = this.configService.getConfig().baseURL; //configService method has been called here
    this.serviceBase = this.configService.getConfig().serviceBase;
  }
  getvesselManagement(): Observable<any[]> {
    
    const userEmail=sessionStorage.getItem('email');
    return this.httpClient.get<any[]>(
      this.baseURL   this.serviceBase   'useradmin/vessels?email=' userEmail
    );
  }
  postvesselManagement(postData: any): Observable<any[]> {
    return this.httpClient.post<any>(this.baseURL   this.serviceBase   `useradmin/vessel`, postData);
  }
}

Error message (getting base url error even though I have added mock service in spec.ts file)

VesselManagementGuard > should be created
TypeError: Cannot read properties of undefined (reading 'baseURL')
TypeError: Cannot read properties of undefined (reading 'baseURL')
    at new VesselManagementService (http://localhost:9876/_karma_webpack_/webpack:/src/app/modules/pages/vessel-management/services/vessel-management.service.ts:19:50)
    at Object.VesselManagementService_Factory [as factory] (ng:///VesselManagementService/ɵfac.js:4:10)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11457:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11276:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:4765:1)
    at ɵɵinject (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:4769:1)
    at Object.VesselManagementGuard_Factory [as factory] (ng:///VesselManagementGuard/ɵfac.js:4:49)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11457:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:11276:1)
    at NgModuleRef.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2015/core.mjs:21832:1)
Expected undefined to be truthy.
Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/modules/pages/vessel-management/resolver/vessel-management.guard.spec.ts:32:19)
    at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:372:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone-testing.js:287:1)

CodePudding user response：

You need to provide for configService, instead you are adding mock for MatDialogRef. Try adding this object in providers array.

{
    provide: AppConfigService,
    useValue: {
        getConfig: () => ({ 
           baseUrl: 'any',
           serviceBase: 'any'
        })
    }
}