角度5：我可以導航到模塊的路由，而無需在URL中包含模塊的路徑段？

Question

因此，我構建了一個Angular 5.2.0應用程序，該應用程序分為3個模塊：

• 一個admin模塊，在用戶導航到任何admin/**路由時加載，
• prefect模塊，當用戶導航至任何prefect/**路線時將加載，
• authentication模塊，在所有其他情況下都將加載。

每個模塊都有自己的路由。 例如， /admin/student/list激活在admin模塊中定義的StudentListComponent 。

現在，如果我轉到/student/list ，而沒有/admin部分，它將加載相同的StudentListComponent ！ 並且可以使用應用程序模塊中定義的每條路線進行復制。

這顯然不是可取的行為。 特別是考慮到我已經設置了路由保護程序來保護admin和prefect模塊，這使得繞開它們非常容易。

任何見解表示贊賞。 是蟲子嗎？ 還是我做錯了什么？

這是我在app.module.ts的代碼：

export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: 'app/modules/admin/admin.module#AdminModule',
    canActivate: [AdminGuard]
  },
  {
    path: 'prefect',
    loadChildren: 'app/modules/prefect/prefect.module#PrefectModule',
    canActivate: [PrefectGuard]
  },
  {
    path: '',
    loadChildren:
      'app/modules/authentication/authentication.module#AuthenticationModule'
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    AuthenticationModule,
    PrefectModule,
    AdminModule
  ],
  providers: [AdminGuard, PrefectGuard],
  bootstrap: [AppComponent]
})
export class AppModule {}

並在admin.module.ts ：

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        path: 'student',
        children: [
          {
            path: 'list',
            component: StudentListComponent
          },
          {
            path: 'new',
            component: StudentEditComponent
          },
          {
            path: ':id',
            component: StudentItemComponent
          },
          {
            path: ':id/edit',
            component: StudentEditComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    HttpClientModule,
    FormsModule,
    // Angular Material modules...
    NavigationModule
  ],
  providers: [StudentService],
  declarations: [
    AdminComponent,
    StudentListComponent,
    StudentItemComponent,
    StudentEditComponent
  ]
})
export class AdminModule {}

並在authentication.module.ts ：

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

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    FormsModule,
    // Angular Material modules...
  ],
  providers: [AuthenticationService, AdminService, StudentService],
  declarations: [
    AuthenticationComponent,
    LoginComponent,
    ResetPasswordComponent
  ]
})
export class AuthenticationModule {}

Answer 1

您將在這里將延遲加載的AdminModule導入應用程序組件中：

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   RouterModule.forRoot(routes),
   AuthenticationModule,
   PrefectModule,
   AdminModule
],

因此實際上不是延遲加載，而是在AppModule加載時加載。 因此，以后可以從'/ admin'和根目錄'/'訪問AdminModule的路由。 只需將其從AppModule的導入中刪除，就可以了。

我創建了一個小型回購，其中提供了您要在此處實現的目標的工作示例

希望能有所幫助

Answer 2

好的，我找到了解決方案：在app.module.ts ，我正在導入功能模塊（ AdminModule等），並且以某種方式產生了這種效果。

我刪除了這些導入，並解決了問題。