I have 2 types of users : OWNER and CUSTOMER.

I am trying to create a module with 3 paths :

• /owner : loads the owner sign-up module
• /customer : loads the customer sign-up module
• / : displays a choice screen where the user will have to choose between the 2 paths

Here is the routing module :

@NgModule({
  imports: [
    RouterModule.forChild(
      [
        {
          path: "owner",
          loadChildren: () => import("./owner/sign-up-owner.module").then((m) => m.SignUpOwnerModule)
        },
        {
          path: "customer",
          loadChildren: () => import("./customer/sign-up-customer.module").then((m) => m.SignUpCustomerModule),
        },
        {
          path: "",
          component: SignUpComponent,
          pathMatch: "full"
        }
      ]
    )],
  exports: [RouterModule]
})
export class SignUpRoutingModule {}

When the 3rd route is present, it always takes precedence on the others. If I navigate to /owner, the choice screen will still be displayed

If the 3rd route is absent, the 2 other routes work fine.

I tried :

• Various combinations of path: "", path: "*", path: "**",
• pathMatch: "full", pathMatch: "prefix" (also tried with no pathMatch)
• Changing the order of the routes

Also, if I put the 3rd route on another path (e.g. "choice"), it works, but if I tried to redirect "" to "choice", I have the same problem again

I would like the 3rd route to be active only when the path is empty