Почему Observable внутри Observable зависает?

У меня есть вызов http.get в моей службе member.service.ts, и я хочу дождаться завершения этого вызова, прежде чем перейти к app.component, поэтому я пытаюсь обернуть вызов http.get в Observable для обработки в app.component.

[Примечание: ранее, до того, как я завернул сервис в Observable, сервис работал нормально. . . вызов http.get сам по себе работает, как и ожидалось, и возвращает объект JSON.]

Но когда я обернул вызов http.get в Observable, как показано ниже, приложение зависло. Я искал в Интернете и читал о flatMap, forkjoin и т. д., но я хотел бы сохранить текущую структуру, где вызов http.get находится в службе member, а весь остальной код — в app.component.

Большое спасибо, если есть идеи, почему он зависает и как это исправить!

member.service.ts

import { Injectable } from '@angular/core';
import { Observable, from, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MemberService {
  url: string = "http://localhost:3000/sign-up";
  data: string = '';

  constructor(private http: HttpClient) { }

  getMemberForm(): Observable<any> {

   let library = this.http.get(this.url,{responseType: 'json'});

    library.subscribe((data) => {
      this.data = JSON.stringify(data);
    });
    return of(this.data);
  }

}

app.component.ts

import { Component, OnInit, Injectable } from '@angular/core';
import { MemberService } from './member.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

@Injectable()
export class AppComponent implements OnInit {
  got_data: boolean = false;
  data: string;

  constructor(private member: MemberService) {}

  ngOnInit() {

    this.member.getMemberForm().subscribe((data)=>{
      this.data = data;
      if (this.data.length > 0) this.got_data = true; 
    });
  }

}