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});

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

这里可能出现什么问题？

Answer 1

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

在您的情况下，您的路由配置在编译后将看起来像这样（PSEUDO-CODE）：

＆＃13;

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 }
      ]
  }
]

＆＃13;

在您的情况下，当您输入/搜索时，您将匹配:id OpportunityProfileComponent。这是因为路由器接受与导航请求路径匹配的第一条路线。

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

1 个答案: