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

Does this answer your question? [ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment](https://stackoverflow.com/questions/52028782/error-error-uncaught-in-promise-cannot-match-any-routes-url-segment) — EJZ, Feb 08 '22 at 23:34

score 1 · Answer 1 · answered Feb 09 '22 at 07:02

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?

answered Feb 09 '22 at 07:02

HassanMoin

2,024
1
6
16

Thank u very much ill try that as soon as i can, thanks for the help. – Alejø Francø Feb 09 '22 at 12:42
Ohhhh thank you very much, as soon as i remove the outlets from the routes it worked out, thanks! – Alejø Francø Feb 09 '22 at 23:32
@AlejøFrancø, welcome. If the answer helps, you can mark it as selected to help the other people viewing this question. – HassanMoin Feb 10 '22 at 05:46

score 0 · Answer 2 · answered Feb 09 '22 at 00:31

0

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.

answered Feb 09 '22 at 00:31

Chris Hamilton

9,252
1
9
26

Thank u very much i thought i could use it, because in the course video the instructor did that so i thought i could, thank u very much for the help. – Alejø Francø Feb 09 '22 at 12:44

How do i declare good routes in angular?

2 Answers2