Why is the imported Angular/TypeScript model not properly mapping over to my service in Angular application?

Question

I am designing a system that tracks mutual fund information entered manually by the user, and am having difficulties getting the application to properly read the properties I have created for my 'fund' model. I get the following error in the Developer Tools console:

ERROR TypeError: Cannot read properties of undefined (reading 'map')
    at funds.service.ts:18
    at map.js:7
    at OperatorSubscriber._next (OperatorSubscriber.js:9)
    at OperatorSubscriber.next (Subscriber.js:31)
    at map.js:7
    at OperatorSubscriber._next (OperatorSubscriber.js:9)
    at OperatorSubscriber.next (Subscriber.js:31)
    at filter.js:6
    at OperatorSubscriber._next (OperatorSubscriber.js:9)
    at OperatorSubscriber.next (Subscriber.js:31)

Below is the syntax for the 'Fund' service:

// funds.service.ts //

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Fund } from "./fund.model";
import { Subject } from "rxjs";
import { Router } from "@angular/router";
import { map } from "rxjs";

@Injectable({providedIn: 'root'})
export class FundsService {
  private funds: Fund[] = [];
  private fundsUpdated = new Subject<Fund[]>();

  constructor(private http: HttpClient, private router: Router) {}

  getFunds() {
    this.http.get<{ message: string, funds: any }>('http://localhost:3000/api/funds')
      .pipe(map((fundData) => {
        return fundData.funds.map(fund => {    // 'fund' to be mapped has this tip: 
          return {                             // Parameter 'fund' implicitly has an 'any' 
            fund_ticker: fund.fund_ticker,     // type, but a better type may be inferred from 
            short_low: fund.short_low,         // usage.
            short_high: fund.short_high,
            long_low: fund.long_low,
            long_high: fund.long_high,
            id: fund._id
          };
        });
      }))
      .subscribe(transformedFunds => {
        this.funds = transformedFunds;
        this.fundsUpdated.next([...this.funds]);
      });
  }

I was under the impression that the system would be able to import the 'Fund' interface (shown below) using the 'import { Fund } from "./fund.model";' line of code. Is this not the case? Do I need to explicitly declare and define the Fund model again within the funds.service.ts file? How do I fix this issue? Below is the model interface syntax.

// fund.model.ts //

export interface Fund {
  id: string;
  fund_ticker: string;
  short_low: number;
  short_high: number;
  long_low: number;
  long_high: number;
}

Any and all help is much appreciated. Sorry if I'm not being clear enough with my question. Please let me know if I can sharpen up the phrasing or answer any questions myself to help clarify my issue.

Answer 1

Try making the type of funds an array type instead of any -

this.http.get<{ message: string, funds: Fund[] }>

Also ensure that the shape of the data being returned from the http.get matches { message: string, funds: Fund[] }. Hope this helps.