Angular 路由未正确映射以进行延迟加载

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 路由中断，因为路由器出于某种原因试图将它与机会路由 (path: ':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。那是因为路由器接受匹配导航请求路径的第一条路由。

Angular 路由未正确映射以进行延迟加载

Angular Routes not mapping properly for lazy loading

javascript

lazy-loading

angular-routing

angular

angular-router