Использование Angular и PouchDB для PWA

Я взял Руководство по Angular Heroes и пытаюсь реализовать службу pouchdb для обслуживания данных. Я сделал резервную копию оригинального сервиса героев, который предоставил множество героев с разными атрибутами. Теперь я пытаюсь изменить службу для локального извлечения документов из pouchdb. Я изменил класс HeroService и настроил некоторые параметры в конструкторе.

import { Injectable, EventEmitter  } from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import { Observable, of } from 'rxjs';
import {MessageService} from './message.service';
import PouchDB from 'pouchdb';

@Injectable({
  providedIn: 'root'
})

export class HeroService {
  private isInstantiated: boolean;
  private database: any;
  private listener: EventEmitter<any> = new EventEmitter();


  constructor(private messageService:MessageService) { 
    if (!this.isInstantiated) {
      this.database = new PouchDB("http://server:5984/db1");
      this.isInstantiated = true;
  }
}



  getHeroes(): Observable<Hero[]> {
  console.info(this.database.allDocs({include_docs: true}))
    return of(this.database.allDocs({include_docs: true}));
    this.messageService.add("HeroService: fetched heroes");

    };

Console.log показывает «ZoneAwarePromise» в файле hero.service.ts в строке console.info, но содержит массив данных и документов, которые я хочу показать на экране. Правильно ли я подхожу к этому, используя службу для передачи данных из PouchDB в приложение Angular?

Компонент, в котором я пытаюсь показать эти данные, - это файл "dashboard.components.ts", а вот новая функция:

getHeroes(): void {
    console.info(this.heroes)
    console.info(this.heroService.getHeroes());
    this.heroService.getHeroes()
    .subscribe(heroes => this.heroes = heroes);
    //console.info(this)

  }

Есть ли лучший подход к этому?