Connecting to API with Angular Webapp using Minikube and Kubernetes

I’m trying to learn Kubernetes and would like to create a simple example of an Angular frontend in a Docker container connecting to a .NET Core API also on a Docker container. I am able to successfully create both the API and the frontend and can see the result on the browse but struggle to retrieve information from the API on the frontend. As the IP of the API changes I can’t hardcode those values in the Angular app before building the image but using the DNS name doesn’t seem to work either.

Currently I have the following in my Angular app:

SERVER_URI: 'http://budgetlist-api:50605/'

backend-api.service.yaml

apiVersion: v1
kind: Service
metadata:
  name: bucketlist-api
spec:
  selector:
    app: bucketlist-api
  ports:
    - protocol: TCP
      port: 50605
  type: ClusterIP

frontend-app.service.yaml

apiVersion: v1
kind: Service
metadata:
  name: bucketlist-app
spec:
  selector:
    app: bucketlist-app
  ports:
    - protocol: TCP
      port: 4200
      targetPort: 4200
  type: NodePort

The Dockerfile for my Angular app is:

FROM node:12.2.0
WORKDIR /app

COPY package.json ./

RUN npm install
RUN npm install -g @angular/cli

COPY . .

CMD ng serve --host 0.0.0.0

I’m not sure what else is needed but I’m happy to add more information if required. Any help is appreciated as I’ve been pulling my hair out trying to figure it out.

Source: StackOverflow