Начало выполнения наблюдаемой после завершения одной наблюдаемой

Question

Я новичок в Angular 7. Мне нужно вызвать один API и дождаться завершения, а затем начать выполнение каждого HTTP-запроса в моем приложении.

(Примечание: фактический API должен начать выполнение после завершенияпервый вызов. Итак, на вкладке In-network вызовы должны проходить по порядку:

Service.ts :

getService(endpoint) {
     let url = 'https://jsonplaceholder.typicode.com'+endpoint;
     return this.http.get(url);
}

public beforeGetService() {
     return this.http.get('https://jsonplaceholder.typicode.com/todos/1');
}

Component.ts :

   this.service.getService('/users').subscribe((data)=>{
       console.log(data);
   });

   this.service.getService('/posts').subscribe((data)=>{
       console.log(data);
   });

Я бы хотел обработать вызов beforeGetService () в самой службе.Я пытался, как показано ниже, но вызовы работают асинхронно: Service.ts:

getService(endpoint) {
    // Assume it will set some values in header & cookie from beforeGetService()  
    let url = 'https://jsonplaceholder.typicode.com'+endpoint;
    return this.beforeGetService().pipe( 
      concatMap(res => this.http.get(url)
    ) 
}

public beforeGetService() {
     // Assume this service will do some updates on headers & cookie
     return this.http.get('https://jsonplaceholder.typicode.com/todos/1');
}

Stackbitz Link: https://stackblitz.com/edit/angular-b3sxl5

Текущий порядок выполнения вызова, как:

1. https://jsonplaceholder.typicode.com/todos/1
2. https://jsonplaceholder.typicode.com/todos/1
3. https://jsonplaceholder.typicode.com/users
4. https://jsonplaceholder.typicode.com/posts

Ожидаемое поведение:

1. https://jsonplaceholder.typicode.com/todos/1
2. https://jsonplaceholder.typicode.com/users (требуется для запуска после завершения 1-го вызова)
3. https://jsonplaceholder.typicode.com/todos/1
4. https://jsonplaceholder.typicode.com/posts(Требуется для запуска после завершения 3-го вызова)