路由参数导致错误的应用程序根 url

Question

在 app.routing.ts 我添加了一个带参数的路由

  {
    path: 'manager-branch/:id',
    loadChildren: './components/manager/manager-branch/manager-branch.module#ManagerBranchModule'
  }

一切正常如果我通过应用程序浏览它，但是如果我在该组件上刷新页面，我的应用程序根 url 将是错误的并且页面将无法加载。

例如，我的应用程序根 url 是 http://localhost:4200

如果我在任何其他没有路由参数的组件上刷新页面，它会正常工作。

如果我在http://localhost:4200/manager-branch/1 上刷新页面，它将无法加载。

失败 加载资源：服务器响应状态为 404（不是 找到）http://localhost:4200/manager-branch/assets/css/font-awesome.min.css

您可以看到应用 url 不正确。里面不应该有manager-branch。

这里是 manager.branch.module.ts

@NgModule({
    imports: [
        ManagerBranchRoutingModule,
        CommonModule,
        Ng2BootstrapModule,
        ModalModule.forRoot(),
        FormsModule
    ],
    declarations: [
        ManagerBranchComponent,
        ManagerEmployeeComponent,
        EmployeeProfileComponent,
        ManagerTransactionsComponent,
        EmployeeTransactionsComponent,
    ]
})
export class ManagerBranchModule {}

问题出在我的 app.module.ts

useClass: PathLocationStrategy

它适用于 HashLocationStrategy，但我必须坚持使用 Path

Answer 1

该问题与 Angular 路由器的路由配置评估行为有关，该行为特定于通过其符号 ManagerBranchModule 延迟加载模块。从http://localhost:4200 访问的应用程序运行良好，因为角度路由器评估的第一个匹配项是默认的空路径，例如：“{ path: '' component: AppComponent }”。 Angular Router 的求值行为默认自动匹配路由配置空字符串“”，则路由完成。如果 Angular 路由器没有找到任何与模式匹配行为匹配的路由配置，则在路由模式匹配期间“回溯”。在http://localhost:4200/manager-branch/1 处直接“刷新”应用程序初始化加载应用程序失败，因为延迟加载的模块可能没有相应的 manager-branch-routing.module 具有空路径或支持“:id”参数的路径路由配置。 “回溯”行为在 app-routing.module 中查找路由配置，即“{ path: “manager-branch/:id”, ...}”，它不会在路由配置中进行评估和匹配，从而导致错误。

另一个问题是您无法初始化和加载延迟加载模块的应用程序，因为 Angular 路由器行为的一个关键方面是作为匹配结果评估的行为不应影响模式的行为路线匹配；这是设计使然；换句话说，不支持在延迟加载模块的路由配置中定义的路由初始化应用程序。或者，查看Custom Preloading Strategies 上的 Angular 文档。此外，请参阅另一个 Angular 路由器 answer，因为它更详细地介绍了路由器的行为以及多个命名路由器出口的上下文中的示例场景，请注意空路径是延迟加载的模块路由的顶级路由配置。

这是一个未经测试的示例配置，可能有助于解决您的问题：

// app-routing.module

const routes: Routes = [
  { path: '', component: AppComponent },
  { 
    path: 'manager-branch', 
    loadChildren: 'manager-branch/manager-branch.module#ManagerBranchModule' 
  }
];

// manager-branch-routing.module
const managerBranchRoutes: Routes = [
  {
    path: '',
    component: ManagerBranchContainerComponent, canActivate: [ ManagerBranchAuthGuardService ],
    children: [
      { path: '', canActivateChild: [ ManagerBranchAuthGuardService ],
        children: [
          { path: '', redirectTo: 'dashboard' },
          { path: 'dashboard', component: ManagerBranchDashboardComponent },
          { path: ':id', component: ManagerBranchDashboardComponent }
        ] },
    ] }
];