Angular HTTP Get Request - ERROR Error: Uncaught (in promise):

Question

I have an issue that I can't resolve. I'm learning Angular and I'm trying to get notifications from a JSON object through an API. Yet I get the error every time: error image

I used a service to get the data, as well as an interface for each Notification.

Code overview.component.html

<div class="content-wrapper">
  <div class="container-fluid">
    <div class="card mb-3">
      <div class="card-header">
        <i class="fas fa-bell"></i> Notifications
      </div>
      <div class="card-body">
        <div class="list-group list-group-flush small">
          <app-notification *ngFor="let notification1 of notifications" icontje="{{notification1.icon}}" boodschapje="{{notification1.message}}"></app-notification>
          <a class="list-group-item list-group-item-action">Load more...</a>
        </div>
      </div>
    </div>
  </div>
</div>

Code overview.component.ts

import { Component, OnInit } from '@angular/core';
import { Notificatie } from '../services/notification';
import { NotificationServiceService } from '../services/notification-service.service';

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

  notifications: Notificatie[] = [];

  constructor(private NotificationService: NotificationServiceService) { }

  ngOnInit(): void {
    this.NotificationService.getNotifications().subscribe({next: data => {this.notifications = data;},error: error => {
      console.log("This is an error: " + error);
    }})
  }
// this.NotificationService.getNotifications().subscribe((notifications => (this.notifications = notifications)))
}

Code notification-service.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http'
import { Observable } from 'rxjs';
import { Notificatie } from './notification';

@Injectable({
  providedIn: 'root'
})
export class NotificationServiceService {

  constructor(private http:HttpClient) { }
  url = "http://www.mocky.io/v2/5be453402f00002c00d9f48f";
 
  getNotifications():Observable<Notificatie[]>{
    return this.http.get<Notificatie[]>(this.url)
  }
  
}

Interface Notificatie

export interface Notificatie {
    id:number;
    message:string;
    icon:string;
}

Answer 1

Add HttpClientModule to AppModule imports

Answer 2

use catchError in rxjs/operators

import { catchError } from 'rxjs/operators';
export class NotificationServiceService {

    getNotifications(): Observable<Notificatie[]> {
        return this.http.get<Notificatie[]>(this.url)
            .pipe(catchError(this.errorHandler))
    }
    errorHandler(error: HttpErrorResponse) {
        return Observable.throw(error.message || "server error.");
    }
}