路由参数导致错误的应用程序根 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 上刷新页面，它将无法加载。

Failed to load resource: the server responded with a status of 404 (Not Found) 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 works fine because the first match evaluated by the angular router is the the default empty path such as: "{ path: '' component: AppComponent }". The evaluation behavior of the Angular Router by default automatically matches route config empty string "", then routing is complete. If the Angular Router doesn't find any route configuration matches the pattern matching behavior "backtracks" during pattern matching of routes. Directly "refreshing" the application initializing loading of the app at http://localhost:4200/manager-branch/1 访问的应用程序失败，因为延迟加载的模块可能没有对应的具有空路径的 manager-branch-routing.module ，或者在路由配置中支持“:id”参数的路径。 "backtracking" 行为在 app-routing.module 中查找路由配置，即“{ path: "manager-branch/:id", ...}”，它不会在路由配置中进行评估和匹配在错误中。

另一个问题是您无法初始化和加载延迟加载模块的应用程序，因为 Angular 路由器行为的一个关键方面是作为匹配结果评估的行为应该不影响路由的模式匹配行为；这是设计使然；换句话说，不支持在延迟加载模块的路由配置中定义的路由处初始化应用程序。或者，查看 Angular 关于 Custom Preloading Strategies. Also, see this other Angular Router 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 }
        ] },
    ] }
];

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

Route Paramater causes wrong app root url

angular-routing

angular