خطأ http.get(...).map is not a function في Angular و TypeScript

مرحباً بالجميع! بدأت تعلم Angular و TypeScript، أحاول إجراء طلب HTTP GET بسيط إلى API. قمت بتثبيت Angular عبر CLI، وأنشأت خدمة (service) وأحاول الحصول على البيانات. أستخدم HttpClient، ولكن عند استدعاء دالة get ومحاولة تطبيق operator map من RxJS أحصل على الخطأ: "http.get(...).map is not a function in [null]". هذا هو الكود الخاص بي: ```typescript import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DataService { private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; constructor(private http: HttpClient) { } getPosts() { return this.http.get(this.apiUrl).map( (response: Response) => response.json() ); } } ``` وفي المكون (component): ```typescript import { Component, OnInit } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppCo