Angular 6中RxJS map导入及HttpClient请求报错解决方案咨询

Hey there! Let's work through these two Angular issues you're hitting with your setup (Angular CLI 6.0.3, Node 8.10.0, RxJS 6.2.0) one by one.

1. Fixing the "Cannot resolve './rxjs-operators'" Error #

RxJS 6 shifted to pipeable operators, which changed how we import tools like map. Here's what's causing this error and how to fix it:

• If you previously used a custom rxjs-operators.ts file (a common pattern in older RxJS versions to bundle frequently used operators), you have two options:
  • Update that file to import operators from rxjs/operators and re-export them, then double-check that your import path points correctly to this file (relative paths can be tricky—make sure it's not pointing to a non-existent location!).
  • Ditch the custom file entirely and import operators directly where you need them, like you tried initially:

    import { map } from 'rxjs/operators';
    

• Also, do a quick search through your codebase for any leftover imports referencing ./rxjs-operators—those stragglers will keep throwing this error. Update every instance you find.

2. Resolving RequestOptions Type Mismatch with HttpClient #

Angular's HttpClient (released in Angular 4.3) replaced the old Http module and doesn't use RequestOptions anymore. Instead, it uses a direct configuration object with properties like headers, params, and responseType. Here's how to refactor your code:

Old Code (with Http and RequestOptions): #

import { Http, RequestOptions, Headers } from '@angular/http';

// Example usage
const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers: headers });
this.http.get('/api/data', options).subscribe(data => { /* ... */ });

New Code (with HttpClient): #

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

// GET request with custom headers
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.httpClient.get('/api/data', { headers: headers }).subscribe(data => { /* ... */ });

// GET request with query parameters
const params = new HttpParams().set('userId', '123');
this.httpClient.get('/api/data', { params: params }).subscribe(data => { /* ... */ });

// POST request with body and headers
const requestBody = { username: 'testUser' };
this.httpClient.post('/api/users', requestBody, { headers: headers }).subscribe(response => { /* ... */ });

• Important notes:
  • HttpHeaders and HttpParams are immutable—each set() or append() call returns a new instance, so make sure to assign the result back if you're adding multiple values (e.g., params = params.set('key', 'value')).
  • Don't forget to import HttpClientModule in your root Angular module (instead of the old HttpModule) to enable HttpClient functionality.

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