Traefik unable to resolve a hostname with the url pointed to another local network device

Currently I face an issue where I have an angular application running on 192.168.1.151:4200 and I am trying to use Traefik to reverse proxy a hostname to the Angular application with "angular.local" so that it will intercept and redirect to the 192.168.1.151:4200 as intended. I have the Traefik and PiHole setup on a docker with the PC's IP address being 192.168.1.100. Side note, for the PiHole I have enabled the Local DNS by pointing the domain angular.local to 192.168.1.151 (the IP of which I the angular application is running). The issue being that when I am using another device with DNS set to 192.168.1.100 to access "angular.local", it is unable to load up anything at all, and I have to do angular.local:4200 in order to access to the angular application in my browser. So I thought that I would have to configure in PiHole's Local DNS from 192.168.1.151 to 192.168.1.100 (the IP of the PC which runs Traefik and PiHole), but with this configuration, I am now totally unable to access anything even now with angular.local:4200. How can I solve it so that when I type in angular.local my Traefik will catch the request and redirects the request to 192.168.1.151:4200 as intended?

Below I will attach my docker compose yaml file and the configurations

docker-compose.yml

version: "3.8"

services:
  traefik:
    image: traefik:v3.0
    container_name: traefik
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
      - "--providers.file.filename=/etc/traefik/traefik.yml"
    ports:
      - "80:80"
      - "8080:8080"
    restart: unless-stopped
    networks:
      - traefik_proxy
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./traefik/traefik.yml:/etc/traefik/traefik.yml

  pihole:
    image: pihole/pihole:2023.05.1
    environment:
      - TZ=Asia/Kuala_Lumpur
      - WEBPASSWORD=admin123
    ports:
      - "8000:80"
      - "53:53/tcp"
      - "53:53/udp"
    volumes:
      - ./pihole/etc-pihole/:/etc/pihole/
      - ./pihole/etc-dnsmasq.d/:/etc/dnsmasq.d/
    dns:
      - 127.0.0.1               # Use localhost as DNS resolver
      - 8.8.8.8                 # Use an external DNS server as fallback
    cap_add:
      - NET_ADMIN
    restart: unless-stopped
    networks:
      - traefik_proxy

networks:
  traefik_proxy:
    external: true

traefik.yml

global:
  checkNewVersion: true
  sendAnonymousUsage: false
api:
 dashboard: true
 insecure: true  # Don't do this in production!
entryPoints:
  web:
    address: :80
providers:
  docker:
    exposedByDefault: false
  file:
    directory: /etc/traefik
    watch: true

http:
  routers:
    pihole-router:
      rule: "Host(`pihole.local`)"
      service: pihole-service
    traefik-router:
      rule: "Host(`traefik.local`)"
      service: traefik-service
    angular-router:
      rule: "Host(`angular.local`)"
      service: scrapcar-service

  services:
    pihole-service:
      loadBalancer:
        servers:
          - url: "http://192.168.1.100:8000"
    traefik-service:
      loadBalancer:
        servers:
          - url: "http://192.168.1.100:8080"
    angular-service:
      loadBalancer:
        servers:
          - url: "http://192.168.1.151:4604"

Routers and services are dynamic, they need to be loaded from a separate dynamic config file via provider.file in static config, especially when using loadbalancer.servers.url.

Check the Traefik dashboard at http://IP-of-server:8080/dashboard/, as you have enabled it in insecure mode.

You should look into Traefik Docker Service Discovery for your other services running in the same server (or use Docker Swarm for multiple nodes), see simple Traefik example.

Yea, but regardless of being dynamic or static config but what I want it to do is just to redirect all the devices from my LAN network to the computer that is hosting the Angular app. So which means that the server that runs PiHole and Traefik will not be handling with all those applications but more like a mediatory that redirects the traffic in Local Network. What I want to achieve is not the same as per what you mentioned in your last sentence as I do not wish to run the other services like my Web App and Backend services on the same server, but on another separate server.

Thank you for your reply.

Using Docker Swarm you can join multiple nodes/computers to a network, then Traefik can discover services running on other nodes and forward requests to those services.