how I can redirect user with angular routing

1
votes

When I trying go to myaddress/home I get the error. When a user enter in address line myaddress/home need to redirect him to myaddress/home/allQuestions. Another routes work. I use angular 8.


    const routes: Routes = [
      {
        path: '', component: MainLayoutComponent, children: [
          {path: '', redirectTo: '/login', pathMatch: 'full'},
          {path: 'login', component: LoginFormComponent},
          {path: 'registration', component: RegistrationFormComponent}
        ]
      },
      { path: 'home', component: HomeLayoutComponent, children: [
          {path: '', redirectTo: '/allQuestions', pathMatch: 'full'},
          {path: 'allQuestions', component: AllQuestionsComponent},
          {path: 'addQuestion', component: AddQuestionComponent},
        ], canActivate: [AuthenticationGuard] 
      }
    ];

Error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'allQuestions'
Error: Cannot match any routes. URL Segment: 'allQuestions'
1
angular-routingangular8

1 Answers

0
votes

Right now with your code , angular router , will try to replace the hole route address (/home) with /login.

To set address to redirectTo, You can not use /

change the second line

...
{ path: 'home', component: HomeLayoutComponent, children: [
          {path: '', redirectTo: '/allQuestions', pathMatch: 'full'},
...

to this

{path: '', redirectTo: 'allQuestions', pathMatch: 'full'},

Bug fixed code

const routes: Routes = [
      {
        path: '', component: MainLayoutComponent, children: [
          {path: '', redirectTo: 'login', pathMatch: 'full'},
          {path: 'login', component: LoginFormComponent},
          {path: 'registration', component: RegistrationFormComponent}
        ]
      },
      { path: 'home', component: HomeLayoutComponent, children: [
          {path: '', redirectTo: 'allQuestions', pathMatch: 'full'},
          {path: 'allQuestions', component: AllQuestionsComponent},
          {path: 'addQuestion', component: AddQuestionComponent},
        ], canActivate: [AuthenticationGuard] 
      }
    ];

Next Step

After you fixed this code , make sure change the way you load your components and consider about using lazy loading.

What i mean is , for example for authorization purposes you can have AuthModule, that module can have his own auth-router.module.ts, that contain route information for auth module (like /signin and /signup ). This way modules will load only if the route that goes there called !