AngularでObservableを使いこなす！エラー「has no exported member 'Observable'」の解決法とサンプルコード

2024-04-02

Angularで「Angular - "has no exported member 'Observable'"」エラーが発生する原因と解決方法

原因

このエラーが発生する主な原因は、以下の2つです。

rxjsモジュールのインポート漏れ

Observableを使用するためには、rxjsモジュールをプロジェクトにインポートする必要があります。

Observableのシンボルのエイリアス設定漏れ

rxjsモジュールをインポートしても、Observableシンボルをエイリアス設定していない場合は、エラーが発生します。

解決方法

このエラーを解決するには、以下の2つの方法があります。

app.module.tsファイルに以下のコードを追加して、rxjsモジュールをインポートします。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { Observable } from 'rxjs'; // RxJSモジュールのインポート

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.tsファイルに以下のコードを追加して、ObservableシンボルをRxjsObservableというエイリアス名で設定します。

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs'; // RxJSモジュールのインポート

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  observable$: Observable<any>; // Observableシンボルのエイリアス設定

  constructor() { }

  ngOnInit() {
    this.observable$ = of(1, 2, 3); // Observableの生成
  }

}

これらの方法を試してもエラーが解決しない場合は、以下の点を確認してください。

rxjsモジュールのバージョンが正しいことを確認する。
プロジェクトのtsconfig.jsonファイルの設定を確認する。

補足

Observableは、非同期処理を扱うためのクラスです。
rxjsは、Observableを含む、非同期処理のためのライブラリです。
Angularは、rxjsライブラリを公式にサポートしています。

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs'; // RxJSモジュールのインポート

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  observable$: Observable<any>; // Observableシンボルのエイリアス設定

  constructor() { }

  ngOnInit() {
    this.observable$ = of(1, 2, 3); // Observableの生成

    this.observable$.subscribe(
      (value) => {
        console.log(value); // Observableから発行された値を出力
      },
      (error) => {
        console.error(error); // エラーが発生した場合は出力
      },
      () => {
        console.log('完了'); // Observableが完了したことを出力
      }
    );
  }

}

このコードを実行すると、コンソールに以下の出力が表示されます。

1
2
3
完了

このコードは、Observableを使用して、非同期処理で3つの値を順にコンソールに出力する例です。

Observableは、様々な非同期処理に使用できます。
rxjsライブラリは、Observableを操作するための様々な演算子を提供しています。

これらの詳細については、以下の資料を参照してください。

AngularでObservableを使用する他の方法

async / await 構文を使用して、非同期処理を同期的に記述することができます。

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs'; // RxJSモジュールのインポート

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  async ngOnInit() {
    const values = await this.getData(); // Observableから値を取得
    console.log(values); // 値を出力
  }

  private getData(): Observable<any> {
    return of(1, 2, 3); // Observableを生成
  }

}

このコードは、async / await 構文を使用して、Observableから値を取得し、コンソールに出力する例です。

RxJSのパイプを使用する

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs'; // RxJSモジュールのインポート
import { map } from 'rxjs/operators'; // RxJSのパイプをインポート

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  observable$: Observable<any>; // Observableシンボルのエイリアス設定

  constructor() { }

  ngOnInit() {
    this.observable$ = of(1, 2, 3)
      .pipe(
        map((value) => value * 2) // 値を2倍にする
      );

    this.observable$.subscribe(
      (value) => {
        console.log(value); // 値を出力
      }
    );
  }

}

このコードは、mapパイプを使用して、Observableから発行される値を2倍にして出力する例です。

RxJSのSubjectを使用する

Subjectは、複数のオブザーバーに値を発行できるオブジェクトです。

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs'; // RxJSモジュールのインポート

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  subject = new Subject<any>(); // Subjectの生成

  constructor() { }

  ngOnInit() {
    this.subject.subscribe(
      (value) => {
        console.log(value); // 値を出力
      }
    );

    this.subject.next(1); // 値を発行
    this.subject.next(2);
    this.subject.next(3);
  }

}