Question

在将Angular从4.1更新到6.1之前，应用程序的路由按预期工作，但是现在我无法理解我做错了什么。当我导航到根路由'/'时，它以某种方式与我的'/ users'路由匹配，并且不包括作为主要详细信息组件的LayoutComponent。

这是我的路由器：

app-routing.module.ts

const routes: Routes = [
  {
    path: 'auth',
    component: AuthorizeComponent
  },
  {
    path: '',
    component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'tickets/ticket',
        loadChildren: 'app/ticket/ticket.module#TicketModule',
      },
      {
        path: 'tickets/department',
        loadChildren: 'app/ticket-department/ticket-department.module#TicketDepartmentModule'
      },
      {
        path: 'tickets/category',
        loadChildren: 'app/ticket-category/ticket-category.module#TicketCategoryModule'
      },
      {
        path: 'users',
        loadChildren: 'app/user/user.module#UserModule'
      },
      {
        path: 'stores',
        loadChildren: 'app/store/store.module#StoreModule'
      },
    ],
  },
  {
    path: 'set-password',
    component: SetPasswordParentComponent
  },
  {
    path: 'error-pages',
    component: ErrorPageComponent
  },
  {
    path: '**',
    component: ErrorPageComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})

ticket.routing.ts

const routes: Routes = [
  {
    path: '',
    component: TicketComponent,
    children: [
      {
        path: '',
        component: TicketListComponent,
        resolve: { tickets: TicketListResolver }
      },
      {
        path: 'add',
        component: AddTicketComponent
      },
      {
        path: ':ticketId/edit',
        component: EditTicketComponent,
        resolve: { ticket: TicketEditResolver }
      },
      {
        path: ':ticketId/details',
        component: TicketDetailsComponent,
        resolve: { ticket: TicketDetailsResolver, user: TicketDetailsUserResolver }
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

ticket-department.routing.ts

const routes: Routes = [
  {
    path: '',
    component: TicketDepartmentComponent,
    children: [
      {
        path: '',
        component: TicketDepartmentListComponent,
        resolve: { departments: TicketDepartmentListResolver }
      },
      {
        path: 'add',
        component: AddTicketDepartmentComponent
      },
      {
        path: ':departmentId/edit',
        component: EditTicketDepartmentComponent,
        resolve: { department: EditTicketDepartmentResolver }
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})

ticket-category.routing.ts

const routes: Routes = [
  {
    path: '',
    component: TicketCategoryComponent,
    children: [
      {
        path: '',
        component: TicketCategoryListComponent,
        resolve: { categories: TicketCategoryListResolver }
        // outlet: 'ticket-category-outlet'
      },
      {
        path: 'add',
        component: AddTicketCategoryComponent,
        resolve: { departments: AddTicketCategoryResolver }
      },
      {
        path: ':ticketCategoryId/edit',
        component: EditTicketCategoryComponent,
        resolve: {
          category: EditTicketCategoryResolver,

        }
        // outlet: 'ticket-category-outlet'
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})

user.routing.ts

const routes: Routes = [
  {
    path: '',
    component: UserComponent,
    children: [
      {
        path: '',
        component: UserListComponent,
        resolve: { users: UserListResolver }
      },
      {
        path: 'add',
        component: AddUserComponent,
      },
      {
        path: ':userId/edit',
        component: EditUserComponent,
        resolve: { user: EditUserResolver }
      },
      {
        path: ':userId/details',
        component: UserDetailsComponent,
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})

store.routing.ts

const routes: Routes = [
  {
    path: '',
    component: StoreComponent,
    children: [
      {
        path: '',
        component: StoreListComponent,
        resolve: { stores: StoreListResolver }
      },
      {
        path: 'add',
        component: StoreAddComponent
      },

      {
        path: ':storeId/edit',
        component: StoreEditComponent,
        resolve: { store: StoreEditResolver }
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})

我正在Chrome中使用Augury查看路由器树，如下所示：

但是我想要的树看起来像这样：

根路由应转到HomeComponent。我尝试在根模块中删除延迟加载的模块的导入，但是随后收到一条错误消息，提示它无法在那些模块中找到组件。任何关于我做错事情的想法都将受到赞赏。

Answer 1

因此，我通过更改以下内容解决了此问题：

首先，我从

更改了app-routing.module.ts中的所有loadChildren行

loadChildren: 'app/ticket/ticket.module#TicketModule'

到

loadChildren: () => TicketModule

然后，由于某种原因，我不得不在子路由模块中命名所有的根路由，如下所示：

const routes: Routes = [
  {
    path: 'tickets',
    component: TicketComponent,
    children: [
      {
        path: '',
        component: TicketListComponent,
        resolve: { tickets: TicketListResolver },
        pathMatch: 'full'
      },
      {
        path: 'add',
        component: AddTicketComponent
      },
      {
        path: ':ticketId/edit',
        component: EditTicketComponent,
        resolve: { ticket: TicketEditResolver }
      },
      {
        path: ':ticketId/details',
        component: TicketDetailsComponent,
        resolve: { ticket: TicketDetailsResolver, user: TicketDetailsUserResolver }
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})

现在，路由已按预期工作。

更新到Angular 6.1后的路由问题

1 个答案: