TypeError: Невозможно прочитать свойство "push" из null

когда я пытаюсь нажать свой массив, у меня возникает следующая ошибка:

Cannot read property 'push' of null

Я попытался решить свою проблему, инициализировав массив, но это не работает. Извините, я новичок в программировании и не понимаю, почему это не работает. Спасибо за помощь.

balade.ts :

export class Balade {
  NOM_BALADE: string;
  DATE_DEPART: string;
  LIEU_RDV: string;
  ID_BALADE?: number;

  constructor(NOM_BALADE: string, DATE_DEPART: string, LIEU_RDV: string, ID_BALADE?: number) {
      this.NOM_BALADE = NOM_BALADE;
      this.DATE_DEPART = DATE_DEPART;
      this.LIEU_RDV = LIEU_RDV;
      this.ID_BALADE = ID_BALADE;
  }
}

balade.service.ts :

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

import { Balade } from './balade';

@Injectable({
  providedIn: 'root'
})
export class BaladeService {
  baseUrl = './htdocs/api';
  balades: Balade[] = [];

constructor(private http: HttpClient) { }

  getAll(): Observable<Balade[]> {
    return this.http.get(`${this.baseUrl}/list.php`).pipe(
      map((res) => {
        this.balades = res['data'];
        return this.balades;
    }),
    catchError(this.handleError));
  }

  store(balade: Balade): Observable<Balade[]> {
    return this.http.post(`${this.baseUrl}/store.php`, { data: balade })
      .pipe(map((res) => {
        this.balades.push(res['data']);
        return this.balades;
      }),
      catchError(this.handleError));
  }

app.component.ts :

import { Component, OnInit } from '@angular/core';

import { Balade } from './balade';
import { BaladeService } from './balade.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  balades: Balade[] = [];
  error = '';
  success = '';

  balade = new Balade('', '','');

  constructor(private baladeService: BaladeService) {
  }

  ngOnInit() {
    this.getBalades();
  }

  getBalades(): void {
    this.baladeService.getAll().subscribe(
      (res: Balade[]) => {
        this.balades = res;
      },
      (err) => {
        this.error = err;
      }
    );
  }

  addBalade(f) {
    this.resetErrors();

    this.baladeService.store(this.balade)
      .subscribe(
        (res: Balade[]) => {
          // Update the list of balades
          this.balades = res;

          // Inform the user
          this.success = 'Created successfully';

          // Reset the form
          f.reset();
        },
        (err) => this.error = err
      );
  }

Вот ошибка:

TypeError: Cannot read property 'push' of null
    at t.project (main.6f2a73c37c9b189cf02f.js:1)
    at t._next (main.6f2a73c37c9b189cf02f.js:1)
    at t.next (main.6f2a73c37c9b189cf02f.js:1)
    at t._next (main.6f2a73c37c9b189cf02f.js:1)
    at t.next (main.6f2a73c37c9b189cf02f.js:1)
    at t._next (main.6f2a73c37c9b189cf02f.js:1)
    at t.next (main.6f2a73c37c9b189cf02f.js:1)
    at t.notifyNext (main.6f2a73c37c9b189cf02f.js:1)
    at t._next (main.6f2a73c37c9b189cf02f.js:1)
    at t.next (main.6f2a73c37c9b189cf02f.js:1)