angular 中的路线加载

Question

我正在尝试在 Angular12 中实施路由策略。路径的层次结构如下：

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

每个根路径的唯一目标是重定向到某个部分的主页（\ 重定向到 \app，\app 重定向到 \app\main 等等）。

以下您可以找到模块和路由器模块配置：

\ 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: []
})

这里是问题：当我运行应用程序 (ng serve) 时，它在控制台中显示错误：Error: Uncaught (in promise): Error: Cannot match any routes: 'app'。如果我从 redirectTo 属性 (redirectTo: '/app' to redirectTo: 'app') 中删除斜杠，则不会显示错误，但不会执行重定向。另一方面，如果我在 URL 中手动输入 /app 或 /auth 一切正常。目前从 / 重定向到 /app 的唯一方法是在 appComponent 的构造函数中添加：this.router.navigate(["/app"]);。为什么应用程序路由中的 redirectTo 不起作用？我是否遗漏了有关如何从 RoutingModule 注册路由的信息？？

Answer 1

显然这种行为是设计使然

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

一个有趣的解释可以在下面找到Chaining Absolute And Local Redirects With The Router In Angular 7.2.13

要避免这个问题，您可以简单地为应用程序创建一个组件，然后重定向到 main。另一种选择是简单地重定向一次 redirectTo: 'app/main' (See this here)

angular 中的路线加载

Routes loading in angular

routes

angular