以角度加载的路线答案

【问题标题】：Routes loading in angular以角度加载的路线
【发布时间】：2021-05-28 14:50:42
【问题描述】：

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

\
  \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' 到 redirectTo：'app'），则错误不会显示，但不会执行重定向。另一方面，如果我在 URL 中手动输入 /app 或 /auth ，一切正常。目前从 / 重定向到 /app 的唯一方法是在 appComponent 的构造函数中添加：this.router.navigate(["/app"]);。为什么应用程序路由中的redirectTo 不起作用？我是否遗漏了有关如何从 RoutingModule 注册路由的内容？？

【问题讨论】：

路线名称不带“/”，因此绝对不应该存在。除此之外，您的问题还不是很清楚。您已经展示了许多模块。他们是懒加载。在引导时首先加载哪些模块。你能提供更多细节吗

标签： angular routes

【解决方案1】：

显然这种行为是设计使然

在您重定向到绝对路径后，本地重定向在重定向后不被接受。

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

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

【讨论】：

感谢宝贵的资源，是的，redirectTo: 'app/main' 是合理的！