Angular 多模块路由

Question

我必须使用模块，其中第二个模块在通过 auth 路由期间被延迟加载。带有路由的主模块 app 模块如下所示：

const app_routes: Routes = [
  { path: '', component: MainComponent, outlet: 'app', pathMatch: 'full', 
  canActivate: [OauthGuard]},
  { path: 'auth', loadChildren: 'app/authentication/authentication.module#AuthenticationModule'},
  { path: '**', component: PageNotFoundComponent, outlet: 'app' }
];

@NgModule({
  declarations: [...],
  imports: [RouterModule.forRoot(app_routes)],
  providers: [OauthGuard],
 bootstrap: [
   AppComponent
 ],
 schemas: [CUSTOM_ELEMENTS_SCHEMA],
 exports: [RouterModule]
})
export class AppModule {}

此处导航至 auth 加载 AuthenticationModule。

const auth_routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    outlet: 'app',
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      {
        path: 'register',
        component: RegisterComponent,
        outlet: 'auth'
      },
      {
        path: 'login',
        component: LoginComponent,
        outlet: 'auth'
      }
    ]}
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(auth_routes),
    UtilsModule,
    HttpModule
  ],
  declarations: [
    AuthenticationComponent,
    RegisterComponent,
    LoginComponent
  ],
  exports: [
    RouterModule
  ],
  providers: [
    ClientService,
    AuthenticationService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [
    AuthenticationComponent
  ]
})

export class AuthenticationModule {
}

根据我的逻辑，当导航到 auth/login 时，LoginComponent 应该加载到 auth 路由器插座上。但相反，我收到此错误消息：

Error: Cannot match any routes. URL Segment: 'auth/login'

按照建议，我记录了当canActivate()在第一次路由更改时被调用时注册的路由：

Routes:  [
  {
    "path": "",
    "outlet": "app",
    "pathMatch": "full",
    "canActivate": [
      null
    ]
  },
  {
    "path": "auth",
    "loadChildren": "app/authentication/authentication.module#AuthenticationModule"
  },
  {
    "path": "**",
    "outlet": "app"
  }
]

在 àuthentication.module` 构造函数的运行中注册的路由相同。

我真的不知道为什么我仍然会收到此错误。有什么建议吗？

Answer 1

在一些帮助下我解决了问题，问题出在插座名称上。我不知道可以有多个未命名的 router-outlets 只要它们属于不同的范围。所以我所做的只是删除插座名称。使用我的旧代码，我将不得不导航到 /auth(auth:login)，其中 (auth:login) 指定要显示的出口名称和子路由。如果没有出口名称，我可以简单地导航到 auth/login 并到达所需的页面。

authentication.module

const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full'},
      {
        path: 'register',
        component: RegisterComponent
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]}
];

Angular 多模块路由

Angular multiple moduels routing

angular-routing

angular-module

angular

authentication.module