ERR_NAME_NOT_RESOLVED:Angular pod not communicating with python backend in Kubernetes

I have deployed angular frontend and python backend in kubernetes via microk8s as separate pods and they are running. I have given backend url as 'http://backend-service.default.svc.cluster.local:30007' in my angular file in order to link frontend with backend. But this is raising ERR_NAME_NOT_RESOLVED. Can someone help me in understanding the issue?

Also, I have a config file which specifies the ip's ports and other configurations in my backend. Do I need to make any changes(value of database host?, flask host?, ports? ) to that file before deploying t to kubernetes?

Shown below is my deployment and service files of angular and backend.

    apiVersion: v1
    kind: Service
    metadata:
     name: angular-service
    spec:
     type: NodePort
     selector:
      app: angular
     ports:
      - protocol: TCP
        nodePort: 30042
        targetPort: 4200
        port: 4200
    ---
    apiVersion: apps/v1
    kind: Deployment
    metadata:
    name: angular-deployment
    labels:
      name: angular
    spec:
     replicas: 1
     selector:
      matchLabels:
        name: angular
     template:
       metadata:
         labels:
           name: angular
       spec:
         containers:
         - name: angular
           image: angular:local
           ports:
         - containerPort: 4200



  apiVersion: v1
  kind: Service
  metadata:
    name: backend-service
  spec:
    type:ClusterIP
    selector:
      name: backend
    ports:
      - protocol: TCP
        targetPort: 7000
        port: 7000
  ---
   apiVersion: apps/v1
   kind: Deployment
   metadata:
     name: backend-deployment
     labels:
       name: backend
   spec:
     replicas: 1
     selector:
       matchLabels:
          name: backend
      template:
       metadata:
         labels:
           name: backend
       spec:
         containers:
         - name: backend
           image: flask:local
           ports:
           - containerPort: 7000