Question

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

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

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

例如，我的应用程序根网址为http://localhost:4200

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

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

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

您可以看到应用网址不正确。不应该有经理分支。

这是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

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

另一个问题是你无法初始化和加载延迟加载模块的应用程序，因为角度路由器行为的一个关键方面是由于匹配而评估的行为不应该影响模式的行为路线匹配;这是设计上的;换句话说，不支持在路由配置中为延迟加载的模块定义的路由初始化应用程序。或者，查看Custom Preloading Strategies上的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 }
        ] },
    ] }
];

Route Paramater导致错误的应用程序根URL

1 个答案: