TypeError: Cannot read properties of undefined (reading 'pageNumber')

Issue

Im done it exactly like in the tutorial and mine is not working, i cant guess why, thanks for any help.

Pagination.ts:

    export interface PageQuery {
  pageNumber: number;
  pageSize: number;
}

export interface QueryBuilder {
  pageQuery: PageQuery;
  aditionalQuery: Map<string, string>;
  buildQueryMap(): Map<string, string>;
  buildQueryString(): string;
  buildPageQueryMap(): Map<string, string>;
}

export class PageRequest implements QueryBuilder {
  constructor(
    public _pageQuery: PageQuery,
    public _aditionalQuery: Map<string, string>
  ) {}
  public pageQuery!: PageQuery;
  public aditionalQuery!: Map<string, string>;

  buildQueryMap(): Map<string, string> {
    let buildQueryMap = new Map<string, string>([...this.buildPageQueryMap()]);
    if (this.aditionalQuery) {
      buildQueryMap = new Map<string, string>([
        ...buildQueryMap,
        ...this.aditionalQuery,
      ]);
    }

    return buildQueryMap;
  }
  buildQueryString(): string {
    return Array.from(this.buildQueryMap())
      .map((itemArray) => `${itemArray[0]}=${itemArray[1]}`)
      .join('&');
  }
  buildPageQueryMap(): Map<string, string> {
    let buildPageQueryMap = new Map<string, string>();

    buildPageQueryMap.set('page', `${this.pageQuery.pageNumber + 1}`);
    buildPageQueryMap.set('limit', `${this.pageQuery.pageSize}`);

    return buildPageQueryMap;
  }
}

export class Page<T> {
  constructor(public content: T[], public totalElements: number) {}

  static fromResponse<T>(response: any) {
    return new Page<T>(
      response.body,
      parseInt(response.headers.get('X-total-Count'))
    );
  }
}

service:

 export class VeiculoService {
  private readonly API = 'http://localhost:8080/api/veiculos';

  constructor(private httpClient: HttpClient) {}

  list() {
    return this.httpClient.get<Veiculos[]>(this.API);
  }

  listPage(queryBuilder: QueryBuilder): Observable<Page<Veiculos>> {
    return this.httpClient
      .get<Veiculos[]>(`${this.API}?${queryBuilder.buildQueryString()}`, {
        observe: 'response',
      })
      .pipe(
        map((response: any) => <Page<Veiculos>>Page.fromResponse(response))
      );
  }

component:

listarPaginas() {
    let queryAdicional!: Map<string, string>;
    this.service
      .listPage(
        new PageRequest(
          {
            pageNumber: this.pageEvent ? this.pageEvent.pageIndex : 0,
            pageSize: this.pageEvent ? this.pageEvent.pageSize : 5,
          },
          queryAdicional
        )
      )
      .pipe(take(1))
      .subscribe(
        (page) => {
          this.page = page;
        },
        (error) => {
          this.page = new Page([], 0);
        }
      );
  }

I got this code from this tutorial: https://www.youtube.com/watch?v=9oLjN47xeeY&t=760s[1]

error in chrome console:

ERROR TypeError: Cannot read properties of undefined (reading 'pageNumber') at PageRequest.buildPageQueryMap (Paginacao.ts:41:53) at PageRequest.buildQueryMap (Paginacao.ts:23:58) at PageRequest.buildQueryString (Paginacao.ts:34:28) at VeiculoService.listPage (veiculo.service.ts:22:52) at VeiculoComponent.listarPaginas (veiculo.component.ts:45:8) at VeiculoComponent_Template_mat_paginator_page_62_listener (veiculo.component.html:99:35) at executeListenerWithErrorHandling (core.mjs:15031:1) at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:15069:1) at ConsumerObserver.next (Subscriber.js:91:1) at SafeSubscriber._next (Subscriber.js:60:1)

Solution

That's a runtime error. Meaning, at the point of time where the pageNumber property is being accessed it is potentially undefined or nullish. To avoid this you need to guard the property against this runtime issue by adding what is called optional chaining operator which is this question mark ?. It means simply instead of

${this.pageQuery.pageNumber + 1}

Try

${this.pageQuery?.pageNumber + 1}

Answered By - Walid