API with dotnet/angular spa app cannot be reached inside docker container but can be reached outside docker container

When I run my .net core3/angular spa application on my local machine everything works. But when I try to put everything in docker-compose while having 2 services one for front-end and one for API only the angular portion works. When angular makes a call to the API the endpoint cannot be reached.

here's my docker-compose

version: '3.4'
services:
  test.ang.c:
    image: ${DOCKER_REGISTRY-}test.ang.c
    build:
      context: ./test-ang 
     # dockerfile: JrTech.Angular.Docker/Dockerfile
  test.ang.angular:
    image: ${DOCKER_REGISTRY-}test.ang.angular
    build:
      context: ./test-ang
      dockerfile: ./ClientApp/Dockerfile
      args:
        - skip_client_build=true
    ports:
      - "4200:4200" 
      - "49153:49153"
   
    volumes:
      - ./test-ang/ClientApp:/app

Dockerfile in test-ang/

FROM mcr.microsoft.com/dotnet/core/aspnet:3.0-buster-slim AS base

WORKDIR /app
EXPOSE 80
EXPOSE 443
# EXPOSE 4200
#EXPOSE 5001
# FROM node:10.15-alpine AS client 
# ARG skip_client_build=false 
# WORKDIR /app 
# COPY ./ClientApp . 
# RUN [[ ${skip_client_build} = true ]] && echo "Skipping npm install" || npm install 
# RUN [[ ${skip_client_build} = true ]] && mkdir dist || npm run-script build

FROM mcr.microsoft.com/dotnet/core/sdk:3.0-buster AS build
# RUN npm update
WORKDIR /src

COPY ["./test-ang.csproj", "."]
RUN dotnet restore "./test-ang.csproj"
COPY . .
WORKDIR "/src/test-ang"

# RUN echo ls 
RUN dotnet build "../test-ang.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "../test-ang.csproj" -c Release -o /app/publish

FROM base AS final
WORKDIR /app
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "./test-ang.dll"]

Dockerfile in ClientApp (angular app):

FROM node:10.15-alpine AS client
EXPOSE 4200 49153
USER node
RUN mkdir /home/node/.npm-global
ENV PATH=/home/node/.npm-global/bin:$PATH
ENV NPM_CONFIG_PREFIX=/home/node/.npm-global
RUN npm install -g @angular/cli@8.1.0
WORKDIR /app
CMD ["ng", "serve", "--port", "4200", "--host", "0.0.0.0", "--disable-host-check", "--poll", "2000"]

Startup.cs

            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {   // This starts up npm with server
                    // spa.UseAngularCliServer(npmScript: "start");
                    // spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");
                    spa.UseProxyToSpaDevelopmentServer("http://test.ang.angular:4200");
                }
            });

fetch-data.component.ts

@Component({
  selector: 'app-fetch-data',
  templateUrl: './fetch-data.component.html'
})
export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'weatherforecast').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}