Routes loading in angular

Question

I'm trying to implement a routing strategy in Angular 12. The hierarchy of paths is the following:

\
  \app
    \app\main
    \app\infos
  \auth
    \auth\signup
    \auth\signin

Every root path has the only goal to redirect to the main page of a section (\ redirects to \app, \app redirects to \app\main and so on).

Following you can find modules and router modules configurations:

\\ app-routing.module
const routes: Routes = [
  {path: '',  pathMatch: 'full', redirectTo: '/app'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

\\ logged-routing.module
const routes: Routes = [
  {path: 'app', pathMatch: 'full', redirectTo: 'app/main'},
  {path: 'app/main', component: MainComponent, canActivate: [AuthGuard]},
  {path: 'app/infos', component: InfosComponent, canActivate: [AuthGuard]}
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

\\ auth-routing.module
const routes: Routes = [
  {path: 'auth', redirectTo: 'auth/signup'},
  {path: 'auth/signup', component: SignupComponent},
  {path: 'auth/signin', component: SigninComponent}
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

\\ app.module
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AuthModule,
    LoggedModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

\\ logged-module

@NgModule({
  declarations: [
    MainComponent,
    SyncingStatusComponent,
    InfosComponent
  ],
  imports: [
    CommonModule,
    LoggedRoutingModule,
  ]
})

\\ auth-module

@NgModule({
  declarations: [
    SignupComponent,
    SigninComponent,
    AuthComponent,
  ],
  imports: [
    CommonModule,
    AuthRoutingModule
  ],
  exports: []
})

Here the problem: When I run the application (ng serve) it shows me in the console an error: Error: Uncaught (in promise): Error: Cannot match any routes: 'app'. If I remove the slash from the redirectTo property (redirectTo: '/app' to redirectTo: 'app') the error it's not shown but the redirect is not performed. On the other hand if I manually type /app or /auth in the URL everything works well. The only way at the moment to redirect from / to /app is adding: this.router.navigate(["/app"]); in the constructor of appComponent. Why redirectTo in the app-routing does not work?? Am I missing something on how routes are registered from the RoutingModule ??

The route name doesn't take a '/' so that should definitely not be there. Apart from that your question isn't really clear. You have shown many modules. Are they lazy loaded. Which modules are loaded first at the time of bootstrap. Can you provide more details — Saurabh Tiwari
– Saurabh Tiwari, Commented May 28, 2021 at 17:20

Owen Kelvin · Accepted Answer · 2021-05-28 17:26:35Z

1

Apparently this behavior is by design

After you redirect to a an absolute path, local redirects are not honored after the redirect.

An interesting explanation can be found on below Chaining Absolute And Local Redirects With The Router In Angular 7.2.13

To avoid this problem you can simply create a component for the app, then redirect to main. Another option is to simply redirect once redirectTo: 'app/main' (See this here)

answered May 28, 2021 at 17:26

Owen Kelvin

15.2k11 gold badges51 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CodeRonin Over a year ago

thanks for the precious resource, and yes redirectTo: 'app/main' is reasonable!

Collectives™ on Stack Overflow

Routes loading in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related