Configuring Default Route and Redirects in Angular Single Page Application

Question

I'm trying to create a single-page application in Angular, where the default route is set to DOMAIN/main. My goal is to redirect every other URL to this default route, except for DOMAIN/privacy, which should open a different component related to privacy.

Examples with desired and actual behavior:

URL	Expected Behaviour	Actual Behaviour
DOMAIN	DOMAIN/main	DOMAIN/main
DOMAIN/main	DOMAIN/main (just open MainPageComponent)	DOMAIN/main/main
DOMAIN/asdf/bcd	DOMAIN/main	DOMAIN/asdf/bcd (nothing happens except for some errors because it cannot find any runtime.js and similar files in there (obviously))
DOMAIN/privacy	DOMAIN/privacy (just open ImprintComponent)	DOMAIN/privacy/main

(incorrect behavior is marked in bold.)

I have gone through several posts and examples, but I'm still struggling to achieve the desired behavior. I don't fully understand how the redirects and paths work, and why the ** wildcard doesn't match /asdf/bcd and redirect to /main.

Here's the code I have tried so far:

const routes: Routes = [
  {
    path: "main",
    component: MainPageComponent,
    pathMatch: "full",
  },
  {
    path: "privacy",
    pathMatch: "full",
    component: ImprintComponent
  },
  {
    path: "",
    redirectTo: "/main",
    pathMatch: "full",
  },
  {
    path: "**",
    redirectTo: "/main",
  }
];

Inside app.modules.ts:

imports: [
  RouterModule.forRoot(routes)
],

Questions

How do I get this working properly? I don't really understand those strange redirects / paths and also don't get why **i.e., doesnt match /asdf/bcd and consequently redirects to /main...

If you need further information, I will provide them as soon as possible. Thanks! :)

Answer 1

Omg, I finally was able to solve this. As I have already suspected, the routing itself wasn't the problem. For building the Angular-Project, so that I can use it on a live sever, I added "baseHref": "" to anglar.json

So it now works by simpliy removing "baseHref": "" or changing ig to "baseHref": "/".