Ошибка http.get(...).map is not a function в Angular и TypeScript

Проблема: устаревший синтаксис и неправильный импорт RxJS операторов

Ошибка http.get(...).map is not a function возникает из-за того, что в современных версиях Angular (начиная с версии 6) и RxJS (начиная с версии 6) изменился способ использования операторов. Раньше операторы были методами на Observable (так называемый "patch" подход), но теперь они стали отдельными функциями, которые нужно объединять через pipe().

Правильное решение

Вот исправленный код сервиса с использованием современного подхода:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) { }

  getPosts(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map((response: any[]) => {
        // Здесь можно трансформировать данные, если нужно
        console.log('Raw response:', response);
        return response;
      })
    );
  }
}

Ключевые изменения:

• Импорт оператора: import { map } from 'rxjs/operators'; — операторы теперь живут в отдельной папке rxjs/operators.
• Использование pipe(): Вместо .map() нужно писать .pipe(map(...)). Это цепной метод, который принимает операторы как аргументы.
• Типизация ответа: http.get<any[]>(this.apiUrl) — указываем ожидаемый тип данных. HttpClient сам парсит JSON, поэтому .json() не нужен.
• Observable тип: Явно указываем возвращаемый тип Observable<any[]> для лучшей читаемости.

Дополнительные важные моменты

1. HttpClient автоматически парсит JSON
В отличие от старого Http (из @angular/http, который deprecated), новый HttpClient (из @angular/common/http) автоматически преобразует ответ в JSON. Вам не нужно вызывать response.json(). Если вы это сделаете, то получите ошибку, так как ответ уже является объектом JavaScript.

2. Если вам всё же нужна трансформация данных
Например, если API возвращает объект, а вам нужен только массив:

getPosts(): Observable<Post[]> {
  return this.http.get<{data: Post[]}>(this.apiUrl).pipe(
    map(response => response.data)
  );
}

3. Обработка ошибок с catchError
Хорошей практикой является использование оператора catchError:

import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

getPosts(): Observable<any[]> {
  return this.http.get<any[]>(this.apiUrl).pipe(
    map(data => {
      // трансформация
      return data;
    }),
    catchError(error => {
      console.error('Error in HTTP request:', error);
      return throwError(() => new Error('Something went wrong'));
    })
  );
}

Проверьте импорты в AppModule

Убедитесь, что в вашем AppModule импортирован HttpClientModule:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule  // обязательно!
  ],
  // ...
})
export class AppModule { }

Заключение

Ошибка "map is not a function" — классическая проблема при переходе на новые версии Angular/RxJS. Запомните правило: все операторы импортируются из rxjs/operators и используются внутри pipe(). Это более модульный и tree-shakeable подход, который позволяет уменьшить размер бандла.

// В компоненте
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="posts$ | async as posts; else loading">
      <div *ngFor="let post of posts">
        {{ post.title }}
      </div>
    </div>
    <ng-template #loading>Loading...</ng-template>
  `
})
export class AppComponent implements OnInit {
  posts$: Observable<any[]>;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.posts$ = this.dataService.getPosts();
  }
}