Почему свойство не существует в объекте?

Я написал пример уровня helloWorld, который получает курс валют, но пример не запускается. В консоль выводится такое сообщение об ошибке:

ERROR in src/app/components/exchange-rates/exchange-rates.component.ts(33,73): error TS2339: Property 'rates' does not exist on type '{}'.

Вот код компонента:

import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
import { Observable } from 'rxjs';
import { shareReplay, map } from 'rxjs/operators';


@Component({
  selector: 'app-exchange-rates',
  templateUrl: './exchange-rates.component.html',
  styleUrls: ['./exchange-rates.component.scss']
})
export class ExchangeRatesComponent implements OnInit {

  rates$: Observable<any[]>;
  loading$: Observable<boolean>;
  errors$: Observable<any>;

  constructor(private apollo: Apollo) { }

  ngOnInit() {
    const source$ = this.apollo.query({
      query: gql`
        {
          rates(currency: "USD") {
            currency
            rate
          }
        }
      `
    }).pipe(shareReplay(1));

    this.rates$ = source$.pipe(map(result => result.data && result.data.rates));
    this.loading$ = source$.pipe(map(result => result.loading));
    this.errors$ = source$.pipe(map(result => result.errors));
  }

}

Проблема в том, что в официальной документации appolo есть ссылка на работающий пример. И мой код полностью повторяет этот пример(даже package.json совпадает)

Помогите пожалуйста понять как мне исправить мой скрипт и вообще в чём суть ошибки.

Я пробовал помещать в setTimeout блок:

this.rates$ = source$.pipe(map(result => result.data && result.data.rates));
    this.loading$ = source$.pipe(map(result => result.loading));
    this.errors$ = source$.pipe(map(result => result.errors));

но не помогло.