How do i declare good routes in angular?

Question

Im using angular and wanted to try lazy loading with multiples modules, and i getting this error Error: Cannot match any routes. URL Segment: 'home/users/profile'

So well i been like a few long hours trying to solve this problem but i foundno answer

APP MODULE

{
    path: 'home',
    component: HomeComponent,
    loadChildren: () =>
      import('./components/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'auth',
    loadChildren: () =>
      import('./components/auth/auth.module').then((m) => m.AuthModule),
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home',
  },

HOME ROUTING MODULE

 {
    path: 'users',
    loadChildren: () =>
      import('../users/users.module').then((m) => m.UsersModule),
  },

USERS ROUTING MODULE

 {
    path: '',
    outlet: 'child',
    component: UsersComponent,
  },
  {
    path: 'user/:id',
    outlet: 'child',
    component: UserComponent,
  },
  {
    path: 'profile',
    outlet: 'child',
    component: ProfileComponent,
  },

Here is the repo if you need to see something else https://github.com/ginebras/user-system

Answer 1

I don't see any need for using named outlets, you are complicating things for yourself. Let's keep it simple, So I removed 'child' from your <router-outlet> as well as removed outlet: child from your routes.

I updated your User's Routing in user-routing.module, It should look like this:

  RouterModule.forChild([
      {
        path: '',
        component: UsersComponent,
        pathMatch: 'full',
      },
      { path: 'profile', component: ProfileComponent },
      {
        path: 'user-detail/:id',
        component: UserComponent,
      },
    ]),
  ],

I also changed the user:/id path to user-detail:id for readability. You can change it back or you change from where you are opening user:/id to user-detail:id.

I update the stackblitz too, have a look: https://stackblitz.com/edit/angular-ivy-rmxi8g?

Answer 2

Welcome Alejø.

Most likely you need to remove this line

component: HomeComponent,

You need to use component or loadChildren but not both. You can put the HomeComponent as an empty path in the home routing module. Don't forget pathMatch: 'full' on all your empty paths.