未定義のプロパティ 'of'を読み取れません

Question

フォームの入力の1つに非同期バリデータを作成しようとしています。これは単純化されたバージョンです。実行の瞬間

function asyncEmailExistsValidator(control: FormControl): Observable<any> { 
    const value: string = control.value || ''; 
    let valid = true; 
    if (value == 'johndoe@yahoo.com') { 
     valid = false; 
    } 

    return Observable.of(valid ? null : { emailExists: true }).delay(5000); 
} 

私はエラーを取得： ERRORの例外TypeError：未定義の 'のプロパティを読み取ることができません。デバッグしようとするとObservableが定義されていないことがわかります。

これは、このコンポーネントの完全なコードです。ここで

import { Component, OnInit } from "@angular/core"; 
import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms"; 
import { Router, ActivatedRoute } from "@angular/router"; 

import { Observable } from 'rxjs/Observable'; 

import { CustomDataValidator } from "./../../services/validators/input-custom-validator"; 
import { AccountService } from "./../../services/account.service"; 

function asyncEmailExistsValidator(control: FormControl): Observable<any> { 
    const value: string = control.value || ''; 
    let valid = true; 
    if (value == 'johndoe@yahoo.com') { 
     valid = false; 
    } 

    return Observable.of(valid ? null : { emailExists: true }).delay(5000); 
} 

@Component({ 
    selector: "email-change", 
    templateUrl: "app/components/email-change/email-change.html", 
    styleUrls: ["app/components/email-change/email-change.css"] 
}) 

export class EmailChangeComponent implements OnInit { 
    emailChangeForm: FormGroup; 
    submitError: boolean = false; 
    submitErrorMessage: string = ""; 
    oldEmail = this.activatedRoute.snapshot.params["email"]; 

    emailExists: boolean = false; 
    emailConfirmClass: string = ""; 

    formValidationTest: boolean = true; 

    constructor(private fb: FormBuilder, private router: Router, private dataValidator: CustomDataValidator, 
     private activatedRoute: ActivatedRoute, private accountService: AccountService) { } 

    ngOnInit(): void { 
     this.emailChangeForm = this.fb.group({ 
      currentEmail: [{ value: this.oldEmail, disabled: true }, null ], 
      newEmailAddress: ["", 
       [ 
        Validators.required, 
        Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'), 
        asyncEmailExistsValidator 
       ] 
      ], 
      newEmailAddressConfirm: ["", [Validators.required]] 
     }); 
    } 

    onSubmit =(): any => { 
     this.accountService.changeEmail({ 
      oldEmailAddress: this.oldEmail, newEmailAddress: this.emailChangeForm.value.newEmailAddress 
      }) 
      .subscribe((data: any) => { 
       if (data.error === true) { 
        this.submitErrorMessage = data.errorMessage; 
        this.submitError = true; 
       } 
       else { 
        this.router.navigate(["my_profile"]); 
       } 
      }); 
    } 

    onCancel =(): any => { 
     this.router.navigate(["my_profile"]); 
    } 
} 

私のpackage.json

{ 
    "version": "1.0.0", 
    "name": "tech-services", 
    "private": true, 
    "dependencies": { 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "@angular/upgrade": "^4.0.0", 
    "bootstrap": "^3.3.7", 
    "material-design-lite": "^1.3.0", 
    "core-js": "^2.4.1", 
    "moment": "^2.14.1", 
    "reflect-metadata": "^0.1.10", 
    "rxjs": "5.1.0", 
    "systemjs": "^0.20.9", 
    "zone.js": "^0.7.6" 
    }, 
    "devDependencies": { 
    "@types/core-js": "0.9.36", 
    "gulp": "^3.9.1", 
    "gulp-clean": "^0.3.2", 
    "gulp-concat": "^2.6.1", 
    "gulp-less": "^3.3.0", 
    "gulp-sourcemaps": "^2.4.0", 
    "gulp-typescript": "^3.1.5", 
    "gulp-uglify": "^2.0.0", 
    "typescript": "^2.2.1", 
    "typings": "2.1.0" 
    } 
} 

Answer 1

インポート以下のモジュールが

import 'rxjs/add/observable/of'; 

それとも、それらの多くを使用している場合、あなたは

import 'rxjs/Rx'; 

を使用して、すべてをインポートすることができています