角路由无法正确映射以进行延迟加载

Question

因此，我有一个包含多个模块的应用程序，这些模块具有正确放置的路由，每个模块都有自己的路由。 一切正常，直到我尝试实现延迟加载。

先前状态：

示例模块

export const EXAMPLE_ROUTES: Routes = [
        { path: 'new', component: AddOpportunityComponent },
        { path: ':id', component: OpportunityProfileComponent,
            children: [
                {
                    path: 'edit/sdg-info', component: SdgInfoComponent
                }

            ]}
];

我在示例模块中导入这个EXAMPLE_ROUTES

现在我有根级路由

const APP_ROUTES: Routes = [
    { path: '', component: HomeComponent},
    { path: 'search', component: SearchComponent },
    { path: 'example', component: ExampleComponent, children: [...EXAMPLE_ROUTES], canActivate: [AuthGuard, OnboardedGuard] },
];

export const appRouting = RouterModule.forRoot(APP_ROUTES, {enableTracing: true});

通过此设置，它可以正常工作

尝试延迟加载后

示例模块

const EXAMPLE_ROUTES: Routes = [
        { path: 'new', component: AddOpportunityComponent },
        { path: ':id', component: OpportunityProfileComponent,
            children: [
                {
                    path: 'edit/sdg-info', component: SdgInfoComponent
                }
            ]}
];

export const exampleRouting = RouterModule.forChild(EXAMPLE_ROUTES);

然后应用程序路由变为

const APP_ROUTES: Routes = [
    { path: '', component: HomeComponent},
    { path: 'search', component: SearchComponent },
    { path: 'example', loadChildren: './example/example.module#ExampleModule',  canActivate: [AuthGuard, OnboardedGuard] }

];

export const appRouting = RouterModule.forRoot(APP_ROUTES, {enableTracing: true});

我面临的问题是，示例路由可以正常工作，现在/ search路由中断了，因为路由器出于某种原因尝试将其与机会路由匹配（路径：'：id'）

这里可能出什么问题了？

Answer 1

当您第一次在RootModule实现FeatureModule ，并且在给定时间之后，您决定要通过loadChildren懒惰加载此FeatureModule时，可能会发生此问题，并且您忘记了从RootModule的导入中删除FeatureModule 。

在您的情况下，编译后（PSEUDO-CODE），您的路由配置将如下所示：

 const Routes_CONFIG = [ { path: '', component: HomeComponent}, { path: 'search', component: SearchComponent }, { path: 'example', loadChildren: './example/example.module#ExampleModule', canActivate: [AuthGuard, OnboardedGuard] } { path: 'new', component: AddOpportunityComponent }, { path: ':id', component: OpportunityProfileComponent, children: [ { path: 'edit/sdg-info', component: SdgInfoComponent } ] } ] 

就您而言，当您仅输入/ search时，将匹配:id OpportunityProfileComponent 。 这是因为路由器接受与导航请求路径匹配的第一条路线。