angular - rxjs obervable.interval(); 在瀏覽器中拋出不是函數的異常

下面給出了 component.ts 文件。即使從 rxjs/add/observable/interval 導入了 interval，它為什麼還會拋出錯誤。

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }
  ngOnInit() {
      const myNumber = Observable.interval(1000);
      myNumber.subscribe(
        (number: number) => {
          console.log(number);
        }
      );
  }
}

瀏覽器中的錯誤訊息：

ERROR TypeError:
  rxjs_Observable__WEBPACK_IMPORTED_MODULE_2__.Observable.interval is
  not a function
      at HomeComponent.push../src/app/home/home.component.ts.HomeComponent.ngOnInit
  (home.component.ts:15)
      at checkAndUpdateDirectiveInline (core.js:20665)
      at checkAndUpdateNodeInline (core.js:21929)
      at checkAndUpdateNode (core.js:21891)
      at debugCheckAndUpdateNode (core.js:22525)
      at debugCheckDirectivesFn (core.js:22485)
      at Object.eval [as updateDirectives] (HomeComponent_Host.ngfactory.js? [sm]:1)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477)
      at checkAndUpdateView (core.js:21873)
      at callViewAction (core.js:22114) View_HomeComponent_Host_0 @ HomeComponent_Host.ngfactory.js? [sm]:1 proxyClass @ compiler.js:17945
  push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError
  @ core.js:22729
  push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError
  @ core.js:14645 (anonymous) @ core.js:16895
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @
  zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @
  zone.js:138
  push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular
  @ core.js:16115
  push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @
  core.js:16895 (anonymous) @ core.js:16779
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @
  zone.js:388 onInvoke @ core.js:16156
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @
  zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @
  zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run
  @ core.js:16070 next @ core.js:16779 schedulerFn @ core.js:12609
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:196
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next
  @ Subscriber.js:134
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next
  @ Subscriber.js:77
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
  @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @
  Subject.js:47
  push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @
  core.js:12593 checkStable @ core.js:16125 onHasTask @ core.js:16169
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @
  zone.js:441
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount
  @ zone.js:461
  push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @
  zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @
  zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async)
  scheduleMicroTask @ zone.js:578
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @
  zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask
  @ zone.js:232
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @
  zone.js:252 scheduleResolveOrReject @ zone.js:862
  ZoneAwarePromise.then @ zone.js:962
  push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule
  @ core.js:16660 ./src/main.ts @ main.ts:11
  __webpack_require @ bootstrap:78 0 @ main.ts:12
  webpack_require @ bootstrap:78 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1
  HomeComponent_Host.ngfactory.js? [sm]:1 ERROR CONTEXT
  DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…},
  elView: {…}} View_HomeComponent_Host_0 @
  HomeComponent_Host.ngfactory.js? [sm]:1 proxyClass @ compiler.js:17945
  push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError
  @ core.js:22729
  push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError
  @ core.js:14650 (anonymous) @ core.js:16895
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @
  zone.js:388 push../node_modules/zone.js/dist/zone.js.Zone.run @
  zone.js:138
  push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular
  @ core.js:16115
  push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @
  core.js:16895 (anonymous) @ core.js:16779
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @
  zone.js:388 onInvoke @ core.js:16156
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @
  zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @
  zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run
  @ core.js:16070 next @ core.js:16779 schedulerFn @ core.js:12609
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.tryOrUnsub @ Subscriber.js:196
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next
  @ Subscriber.js:134
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next
  @ Subscriber.js:77
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next
  @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @
  Subject.js:47
  push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @
  core.js:12593 checkStable @ core.js:16125 onHasTask @ core.js:16169
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @
  zone.js:441
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount
  @ zone.js:461
  push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @
  zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @
  zone.js:205 drainMicroTaskQueue @ zone.js:595 Promise.then (async)
  scheduleMicroTask @ zone.js:578
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @
  zone.js:410 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask
  @ zone.js:232
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @
  zone.js:252 scheduleResolveOrReject @ zone.js:862
  ZoneAwarePromise.then @ zone.js:962
  push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule
  @ core.js:16660 ./src/main.ts @ main.ts:11
  __webpack_require @ bootstrap:78 0 @ main.ts:12
  webpack_require @ bootstrap:78 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1

答案＃1

試試這個：

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

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

  constructor() { }
  ngOnInit() {
      const myNumber = interval(1000);
      myNumber.subscribe(
        (number: number) => {
          console.log(number);
        }
      );
  }
}