Why is my ionic app giving me the error 'Cannot GET /' when I run it?

I am writing an application for a grocery list with Ionic, and I’m currently trying to integrate the information in mongoDB with my Ionic app. However, when I run ‘ionic serve’, the only thing that loads in the browser is ‘Cannot GET /’. I’m not sure where I’ve gone wrong in my code. Any help would be greatly appreciated! I’ve included the code for my ‘Groceries-Service’ service. When I compile, I get the error 'Type Observable<{}> is not assignable to type ‘Observable<object[ ]>’. I think the problem is in the getItems function.

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

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

  items: any = [];

  dataChanged$: Observable<boolean>;

  private dataChangeSubject: Subject<boolean>;

  baseURL = "http://localhost:8080";

  constructor(public http: HttpClient) {
    console.log('Hello GroceriesServiceProvider Provider');

    this.dataChangeSubject = new Subject<boolean>();
    this.dataChanged$ = this.dataChangeSubject.asObservable();
   }

  getItems(): Observable<object[]> {
    return this.http.get(this.baseURL + '/api/groceries').pipe(
      map(this.extractData),
      catchError(this.handleError)
      );
  }

  private extractData(res: Response) {
    let body = res;
    return body || {};
  }

  private handleError(error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const err = error | '';
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

  removeItem(id){
    console.log("#### Remove Item - id = ", id);
    this.http.delete(this.baseURL + "/api/groceries/" + id).subscribe(res => {
      this.items = res;
      this.dataChangeSubject.next(true);
    });
  }

  addItem(item){
    this.http.post(this.baseURL + "/api/groceries", item).subscribe(res => {
      this.items = res;
      this.dataChangeSubject.next(true);
    })
  }

  editItem(item, index) {
    console.log("Editing item = ", item);
    this.http.put(this.baseURL + "/api/groceries/" + item._id, item).subscribe(res => {
      this.items = res;
      this.dataChangeSubject.next(true);
      
    });
  }
}

I’m also having a similar issue .

I think that in this case, all we can know from “similar” is that you also have an app with a compile-time error. You need to fix it.

  1. Have you looked in your browser Developer Tools window to see if there is an error showing on the console tab? (Press F12 to open the Developer Window in your browser)

  2. Is there an error showing in the console where you ran Ionic Serve

I’ve just had this issue with nothing much helpful shown in the browser developer tools. What helped was doing a production build (this is with Ionic 5, but I’m sure it would help with earlier versions), which highlighted the error causing the problem.