Angular routes not making exact URL

Issue

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

Solution

the problem was in the imports, I was importing the navigation Module

imports: [
    NavigationModule, // this module need to be deleted !
    Template Module,
    MatButtonModule,
    LayoutModule,
    
    HttpClientModule,
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(appRoutes),
  ],

Answered By - theDEGLA