Angular Service returns Observable with undefined values

Question

I have an angular app that should display set of components after a API call to a server, where the server will respond with the components that user can access based on his/her profile.

I implemented this using a separate service to handle and retrieve user components, and store it within the the service itself to easily acquire inside the webapp.

My implementation is as follows,

API Service to make API Calls,

api.service.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import {AuthService} from './auth.service';
import {Params} from '@angular/router';
@Injectable({
  providedIn: 'root'
})


export class ApisService {

  GET_BATCH_SCHEDULE = 'http://localhost:8000/getbatchplan';
  GET_USER_STATIONS = 'http://localhost:7071/api/getUserStations';
  GET_USER_LOCATIONS = 'http://localhost:7071/api/getUserLocations';




  constructor(private httpClient: HttpClient, private authService: AuthService) { }


  getCutplanBatches() {
    return this.httpClient.get(this.GET_BATCH_SCHEDULE);
  }


  getStations(location: string) {
    if (location === undefined){
      console.log("undefined location call");
      location = 'aqua';
    }
    const params = new HttpParams()
      .set('email', this.authService.getAuthenticateduserInfo().displayableId)
      .append('location', location);

    return this.httpClient.get(this.GET_USER_STATIONS, { params: params });

  }

  getLocations() {
    const params = new HttpParams()
      .set('email', this.authService.getAuthenticateduserInfo().displayableId);

    return this.httpClient.get(this.GET_USER_LOCATIONS, { params: params });

  }


}

Separate service to retrieve and store information related to components

station.service.ts

import {Injectable} from '@angular/core';
import {ApisService} from './apis.service';
import {StationModel} from '../models/station.model';
import {BehaviorSubject, Observable} from 'rxjs';


@Injectable({
  providedIn: 'root'
})


export class StationService {
  userStations: BehaviorSubject<StationModel[]>;
  userLocation: string;

  constructor(private apiService: ApisService) {
    this.userStations = new BehaviorSubject<StationModel[]>([]);
    this.setLocationStations('aqua');

  }
  setLocation(location: string) {
    this.userLocation = location;

  }
  getLocation() {

      return this.userLocation;


  }
  setLocationStations(locationSelect: string) {
    this.apiService.getStations(locationSelect).subscribe((data: StationModel[]) => {
      this.userStations.next(data['stations']);
      console.log('setting user locations:', this.userStations);
      return this.userStations;

    });


  }
  public getLocationStations(): Observable<StationModel[]> {
    console.log('inside station service:', this.userStations);
    console.log('inside station service loc:', this.userLocation);


    return this.userStations.asObservable();

  }

}

and a resolver to pass the necessary information to the component based on the route. Here it make calls to the station.service.ts to get stored values and to make API calls necessary using api.service.ts

station.resolver.service.ts

import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {StationService} from '../../services/station.service';
import {Injectable} from '@angular/core';
import {StationModel} from '../../models/station.model';
@Injectable({
  providedIn: 'root'
})
export class StationRouteResolver implements Resolve<StationModel> {
  currentStation: StationModel;
  constructor(private stationService: StationService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    console.log('Resolves:', route.params['location']);

    if (this.stationService.getLocation() === undefined) {
      console.log('Initial setting:', route.params['location']);
      this.stationService.setLocation(route.params['location']);

    }else if (this.stationService.getLocation() !== route.params['location']) {
      console.log('Changing location settings:', route.params['location']);
      this.stationService.setLocation(route.params['location']);
    }else{
      console.log('Same location found!');
    }

    this.stationService.getLocationStations().subscribe((stations: StationModel[]) => {
      console.log('observer resolver:', stations);

      this.currentStation = stations.filter((station) => {
        return station.stationPath === route.params['station'];

      })[0];
      console.log('----current station:', this.currentStation);

    });
    return this.currentStation;
    // this.currentStation = this.stationService.getLocationStations().filter((station) => {
    //   return station.stationPath === route.params['station'];
    //
    // })[0];

  }

}

And station component is the one which handles which to display using the input from the services.

station.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {StationModel} from '../../models/station.model';
import {ActivatedRoute} from '@angular/router';



@Component({
  selector: 'app-station',
  templateUrl: './station.component.html',
  styleUrls: ['./station.component.scss']
})
export class StationComponent implements OnInit {
 station: StationModel;

  constructor(private route: ActivatedRoute) {

  }
  ngOnInit() {


    this.route.data.subscribe((data) => {
      this.station = data['station'];
    });
    console.log('*****params station', this.route.data['station']);


  }




}

which use *ngIf in template to select the correct component

station.component.html

<app-batch-list-view *ngIf="station.stationType == 'o'"></app-batch-list-view>
<app-dashboard-view *ngIf="station.stationType == 'm'"></app-dashboard-view>
<app-print-view *ngIf="station.stationType == 'p'"></app-print-view>

The problem is I get a variable undefined error at the startup and at the refresh of the page, specifically in the station.component because station.stationType is undefined and the app breaks up from that.

However this works(components get loaded without any error using ngif) if i navigate back and come back to the same route.

I am wondering whether this is because of the use of the resolver or something wrong in my implementation?

Sorry if my question is not much clear.If anyone could point out what's wrong would be really helpful.

Answer 1

Try this: this is because of not define nullable variable station or not sync call api.

For the first: station: Nullable<StationModel>

Or

For the Second: You can use ngAfterViewInit() instead of ngOnInit in station.component.ts