Angular（6）路由问题

Question

我在使用 Angular 6 路由器时遇到了一些奇怪的问题，但这个确实令人沮丧。

这是我在routing-app.module.ts 中构建的路线：

 export const routes: Routes = [
    {
        path: 'login',
        component: HomeScreenComponent,
        children: [
            {
                path: '',
                component: LoginComponent,
                canActivate: [LoginGuard],
            }
        ]
    },
    {
        path: 'password',
        component: HeaderComponent,
        canActivate: [AuthGuard],
        canActivateChild: [AuthGuard],
        children: [
            {
                path: '',
                component: UpdatePasswordComponent
            }
        ]
    },
    {
        path: 'companies/:company_id',
        loadChildren: './facility/facility.module#FacilityModule',
        canLoad: [FacilityGuard]
    },
    {
        path: 'password-reset',
        loadChildren: './general/password/reset-password/reset-password.module#ResetPasswordModule'
    },
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: 'not-found'
    }
];

然后，在设施模块内部：

export const routes: Routes = [
    {
        path: 'dashboard',
        component: HeaderComponent,
        children: [
            {
                path: 'account-rep',
                component: AccountRepDashboardComponent
            },
            {
                path: '',
                component: FacilityDashboardComponent,
                resolve: { company: FacilityDashboardResolve },
                canActivate: [FacilityGuard]
            }
        ]
    },
    {
        path: 'manifests',
        component: HeaderComponent,
        canActivate: [FacilityGuard],
        canActivateChild: [FacilityGuard],
        children: [
            {
                path: 'deleted',
                component: ListDeletedFacilityManifestComponent,
                resolve: { manifests: ListDeletedFacilityManifestResolve }
            },
            {
                path: '',
                component: FacilityManifestComponent,
                resolve: { company: ListFacilityManifestResolve }
            },
            {
                path: ':manifest_id/reconcile',
                component: FacilityReconcileComponent,
                resolve: { manifest: FacilityReconcileResolve }
            }
        ]
    },
    {
        path: 'customers',
        loadChildren: './customer/facility-customer.module#FacilityCustomerModule'
    },
    {
        path: 'sites',
        loadChildren: './site/facility-site.module#FacilitySiteModule'
    }
];

这就是我的问题所在。如果您尝试导航到/login，您最终会到达FacilityCustomerModule 内的路线：

export const routes: Routes = [
    {
        path: '',
        component: HeaderComponent,
        children: [
            {
                path: ':id',
                component: RootFacilityCustomerComponent,
                resolve: { site: DetailFacilityCustomerResolve },
                children: [
                    {
                        path: 'edit',
                        component: EditFacilityCustomerComponent
                    },
                    {
                        path: '',
                        component: DetailFacilityCustomerComponent,
                        children: [
                            {
                                path: 'details',
                                component: FacilityCustomerDetailsTabComponent
                            },
                            {
                                path: 'sites',
                                component: FacilityCustomerSitesTabComponent
                            },
                            {
                                path: 'users',
                                component: FacilityCustomerUsersTabComponent
                            },
                            {
                                path: '',
                                redirectTo: 'details',
                                pathMatch: 'full'
                            }
                        ]
                    }
                ]
            },
            {
                path: '',
                component: ListFacilityCustomerComponent
            }
        ]
    }
];

我不知道为什么路由器会匹配这个。我知道它正在重定向，因为您最终会到达/login/details。

也许我对 Angular 路由器的工作原理没有足够的了解，但我认为它会命中第一条路由 /login 并匹配它，除非它从内到外递归地构建路由？

任何人都可以对此有所了解吗？我在使用 Angular 4 或 5 时没有遇到太多麻烦，所以事情似乎发生了变化，我只是不确定如何。

编辑：

根据要求，这里是装饰器。

RoutingAppModule:

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

RoutingFacilityModule & RoutingFacilityCustomerModule:

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

AppModule:

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpClientModule,
        DataEntryModule,
        FacilityModule,
        UpdateModule,
        SupportModule,

        CtaModule,
        HeaderModule,
        HomeScreenModule,

        RoutingAppModule,
        ResetPasswordModule
    ],
    declarations: [
        AppComponent,

        LoginComponent,
        NotFoundComponent,
        NotPermittedComponent
    ],
    providers: [
        AppErrorHandlerService,
        {
            provide: ErrorHandler,
            useClass: AppErrorHandler
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

当使用延迟加载时，您不应该在根模块中导入模块。

您对在根模块中导入的模块 FacilityModule 使用了延迟加载。

在根模块中还引入了其他延迟加载的模块，您应该从导入中删除所有延迟加载的模块：

@NgModule({
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    DataEntryModule,
    UpdateModule,
    SupportModule,

    CtaModule,
    HeaderModule,
    HomeScreenModule,

    RoutingAppModule
],