Angular学习遇RxJS报错：../node_modules/rxjs/Rx无导出成员'of'

Hey there! I see you’re working through the Angular tutorial and ran into that annoying "'../node_modules/rxjs/Rx"' has no exported member 'of'" error. Let’s fix this quickly.

The Root Cause #

You’re importing of from the wrong path! In RxJS 6 and later (which is what modern Angular versions use), creation operators like of aren’t exported from rxjs/Observable anymore. That path is only for the Observable class itself now—all the handy operators live directly in the root rxjs package.

The Fix #

Swap out your import line for the correct one. You already have the right line commented out—just uncomment it and remove the incorrect import:

// Replace this:
// import { Observable, of } from 'rxjs/Observable';

// With this:
import { Observable, of } from 'rxjs';

Here’s What Your Updated hero.service.ts Should Look Like #

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

@Injectable({
  providedIn: 'root'
})
export class HeroService {
  constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]> {
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }
}

This change aligns with RxJS 6’s modular structure, which was designed to make imports cleaner and tree-shaking more effective. Once you update the import, your app should run without that error.

内容的提问来源于stack exchange，提问作者arun