Angular routes not making exact URL-CodePudding

Angular routes zapping the parent and can go directly to the child when I'm expecting to give me a 404 page. this is the route of the app module

{
 path: "mocha",
 loadChildren: () =>
  import("./navigation/navigation.module").then((m) => m.NavigationModule),
  
},
{
 path : "**",
 redirectTo : "error/404"
},

and this is the child route in the navigation module

{
path : "admin",
loadChildren: () =>
  import("./admin/admin.module").then((m) => m.AdminModule),
component : AdminComponent,
},
{
  path : "emplyer",
  loadChildren: () =>
    import("./employer/employer.module").then((m) => m.EmployerModule),
  component : EmployerComponent
  },

the 2 URLs: "/mocha/admin" and "/admin" giving me the same result, however, I'm waiting to give an error in /admin

https://codesandbox.io/s/vibrant-frog-vmqjf

CodePudding user response：

Try this change to the child route in the navigation module:

 {
    path: '', // It will take the "base" route as defined in paerent route (/mocha/ in this case)
    children: [
       {
           path : "admin",
           loadChildren: () => import("./admin/admin.module").then((m) => m.AdminModule),
           component : AdminComponent,
       },
       {
           path : "emplyer",
           loadChildren: () =>
           import("./employer/employer.module").then((m) => m.EmployerModule),
           component : EmployerComponent
       },
...

CodePudding user response：

It is not mentioned in your posted code, but you have to make sure that you are not using the admin module directly in the app module, that could be the reason why you have /admin working.