Проблемы с маршрутизацией после обновления до Angular 6.1

Martin Johansson спросил: 03 ноября 2018 в 08:13 в: angular

Маршрутизация моего приложения работала должным образом до того, как я обновил 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]
})
билет-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
  ]
})
билет-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
  ]
})

пользователь .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
  ]
})
I" я использую Augury в Chrome для просмотра моего дерева маршрутизатора, и это выглядит так:

корневой путь должен идти домой. Я попытался удалить импорт модулей с отложенной загрузкой в ​​моем корневом модуле, но затем я получаю сообщение об ошибке, в котором говорится, что он не может найти компоненты в этих модулях. Любые идеи относительно того, что я делаю неправильно, очень оценены.


0 ответов