Service called only occasionally in ngOnInit

Question

The following component uses a service to fetch data from a server with the HttpClient module. The service basically works. When an individual bankaccount is selected the BankaccountListComponent is destroyed and the BankaccountEditComponent displayed. When clicking on save the method saveBankaccount in the BankaccountEditComponent is executed (see below). The data is sent to the server and stored (always). After saving the data the BankaccountListComponent is displayed. In ngOnInit it should fetch again the data.

The problem is the ngOnInit of the BankaccountListComponent is executed (always) but the data is not fetched always. It does not work all the time and I cannot figure out why.

From BankaccountEditComponent:

  saveBankaccount() {
    this.subscription = this.route.params
      .subscribe(params => {
        const id = (params['id'] || '');
        if (id) {
          this.bankaccountService.update(id, this.bankaccount).subscribe(bankaccount => {
            this.bankaccount = bankaccount;
          });
        } else {
          this.bankaccountService.add(this.bankaccount).subscribe(bankaccount => {
            this.bankaccount = bankaccount;
          });
        }
        const relUrl = this.router.url.includes('edit') ? '../..' : '..';
        this.router.navigate([relUrl], { relativeTo: this.route });
      });
  }

All of BankaccountListComponent:

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

import { BankaccountService } from '../../services/bankaccount.service';
import { Bankaccount } from '../../domain/bankaccount';

@Component({
  selector: 'ac-bankaccount-list',
  templateUrl: './bankaccount-list.component.html',
  styleUrls: ['./bankaccount-list.component.css']
})
export class BankaccountListComponent implements OnInit, OnDestroy {

  bankaccounts: Bankaccount[];
  bankaccountSelectedId: number;

  constructor(private bankaccountService: BankaccountService) { }

  ngOnInit() {
    console.log('init BankaccountListComponent');
    this.getBankaccounts();
  }

  ngOnDestroy() {
    console.log('destroying BankaccountListComponent');
  }

  getBankaccounts() {
    this.bankaccountService.getBankaccounts().subscribe(bankaccounts => {
      this.bankaccounts = bankaccounts;
      console.log('this.bankaccount: ' + Array.prototype.map.call(this.bankaccounts, function(bankaccount) { return bankaccount.name; }).join(", "));
    });
  }

  selectBankaccount(bankaccountId: number) {
    this.bankaccountSelectedId = bankaccountId;
    console.log('id of bankaccount selected: ' + this.bankaccountSelectedId);
  }

  deleteBankaccount(bankaccountId: number) {
    console.log('id of bankaccount to delete: ' + bankaccountId);
    this.bankaccountService.delete(bankaccountId).subscribe(_ => {
      this.getBankaccounts();
    });
  }

}

All of BankaccountService:

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

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import 'rxjs/add/operator/map';

import { Bankaccount } from '../domain/bankaccount';

@Injectable()
export class BankaccountService {

  private headers = new HttpHeaders();
  private bankaccountsUrl = 'http://localhost:8090/account/accounts/';

  constructor(private httpClient: HttpClient) {
    this.headers = this.headers.set('Content-Type', 'application/json');
    this.headers = this.headers.set('Accept', 'application/json');
  }

  getBankaccounts(): Observable<Bankaccount[]> {
    return this.httpClient.get<Bankaccount[]>(this.bankaccountsUrl).map((result: any) => {
      console.log('fetched ' + result._embedded.accounts.length + ' bankaccounts from server');
      return result._embedded.accounts;
    });
  }

  getBankaccount(id: number): Observable<Bankaccount> {
    return this.httpClient.get<Bankaccount>(this.bankaccountsUrl + id).map((result: any) => {
      console.log('fetched bankaccount with id ' + result.id + ' from server');
      return result;
    });
  }

  update(id: number, bankaccount: any): Observable<Bankaccount> {
    return this.httpClient.put<Bankaccount>(this.bankaccountsUrl + id, bankaccount);
  }

  add(bankaccount: Bankaccount): Observable<Bankaccount> {
    return this.httpClient.post<Bankaccount>(this.bankaccountsUrl, bankaccount);
  }

  delete(id: number): Observable<Bankaccount> {
    console.log('will delete bankaccount ' + this.bankaccountsUrl + id);
    return this.httpClient.delete<Bankaccount>(this.bankaccountsUrl + id);
  }

}

Answer 1

(Rewritten after comments)

Chain Observables instead of nesting subscriptions

First of all, it's bad practice to nest subscriptions.

Among other reasons, because of readability. It becomes hard to tell which actions will be executed in which order.

First fix : use flatMap operator to chain Observables.

this.subscription = this.route.params
  .flatMap(params => {  // use 'flatMap' instead of 'subscribe' here
    const id = (params['id'] || '');
    if (id) {
      // here return the Observable that goes next instead of subscribing
      return this.bankaccountService.update(id, this.bankaccount);
    } else {
      // here also
      return this.bankaccountService.add(this.bankaccount);
    }
  })
  // here you  action following the 'update' or 'add' 
  // (what you wanted to do nested in the previous block)
  .subscribe(bankaccount => {
     this.bankaccount = bankaccount;
  });
  const relUrl = this.router.url.includes('edit') ? '../..' : '..';
  this.router.navigate([relUrl], { relativeTo: this.route });
});

Second, enforce the order of your operations

This was the actual cause of your issue as per your last comments : you have a asynchronous operations order problem.

You want to navigate only after create / edit operation returns . Currently, there is a race condition between the edit and the get.

You are calling the update/create before the select (which makes sense), but since they are asynchronous, sometimes the select operation returns before the update/create has been executed, hence the symptoms you witnessed. (sometimes receiving the old version, even though the update was always executed)

Solution : Call your 'read' operation only after the 'edit/create' has finished.

Hopefully, the fix is very simple here : just move the router.navigate part in the subscription callback, since this part is executed after the operation has returned :

  .subscribe(bankaccount => {
     this.bankaccount = bankaccount;
     const relUrl = this.router.url.includes('edit') ? '../..' : '..';
     this.router.navigate([relUrl], { relativeTo: this.route });
  });