Вопросы маршрутизации с ленивой загрузкой

Question

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

Мое приложение разделено на два (более подходящих) макета, для этого я использую два компонента (PublicComponent и SecureComponent), это позволяет мне загружать совершенно разные макеты, а также организовывать масштабируемый проект.

С моей настройки маршрутизации у меня есть два вопроса:

1. корневой страницы (например: http://myapp.com) загружает CustomerListComponent вместо HomeComponent и это также обход SecureComponent
2. клиент/редактировать /: идентификатор имеет очень странное поведение при загрузке правильного шаблона, но загрузка URL-адреса является клиентом, а код компонента генерирует ошибку, потому что параметр id явно не указан

My app-routing.module.ts:

const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full'}, 
    { 
     path: '', 
     component: PublicComponent, 
     children: [ 
      { path: 'login', component: LoginComponent } 
     ] 
    }, 
    { 
     path: '', 
     component: SecureComponent, 
     canActivate: [LoggedInGuard], 
     children: [ 
      { path: 'home', component: HomeComponent }, 
      { path: 'customer', loadChildren: 'app/customer/customer.module#CustomerModule' } 
     ] 
    } 
]; 

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

клиент-routing.module.ts:

export const CUSTOMER_ROUTES : Routes = [ 
    { path: '', component: CustomerListComponent }, 
    { path:'new', component: CustomerEditComponent }, 
    { path:'edit/:id', component: CustomerEditComponent } 
]; 

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

У вас есть какие-либо идеи о том, что я делаю неправильно?

Answer 1

Я просто понял это. Моя ошибка была в ленивых настройках маршрутов, я тоже должен указать путь.

здесь мой рабочий настройки:

приложение-routing.module.ts

const APP_ROUTES : Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { 
     path: '', 
     component: PublicComponent, 
     children: [ 
      { path: 'login', component: LoginComponent } 
     ] 
    }, 
    { 
     path: '', 
     canActivate: [LoggedInGuard], 
     component: SecureComponent, 
     children: [ 
      { path: 'home', component: HomeComponent }, 
      { 
       path: 'customer', 
       loadChildren: 'app/customer/customer.module#CustomerModule' 
      } 
     ] 
    } 
]; 



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

И мой клиент-routing.module.ts

export const CUSTOMER_ROUTES : Routes = [{ 
    path: 'customer', 

    canActivate: [ LoggedInGuard ], 
    component: SecureComponent, 
    children: [ 
     { path: '', component: CustomerListComponent }, 
     { path:'new', component: CustomerEditComponent }, 
     { path:'edit/:id', component: CustomerEditComponent } 
    ] 
}]; 
@NgModule({ 
    imports: [RouterModule.forChild(CUSTOMER_ROUTES)], 
    exports: [RouterModule] 
}) 

Большое спасибо Roman C для его Помогите.

Answer 2

хорошо, что вы добавили несколько путей с path:'', что неверно. представьте, если ваш сайт www.localhost.com для этого пути, который вы назначили ему publicComponent и SecureComponent.

ваше приложение-routing.module.ts должно быть как-то этого ..

const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: 'loginmain', pathMatch: 'full'}, 
    { 
     path: 'loginmain', 
     component: PublicComponent, 
     children: [ 
      { path: 'login', component: LoginComponent } 
     ] 
    }, 
    { 
     path: 'secure', 
     component: SecureComponent, 
     canActivate: [LoggedInGuard], 
     children: [ 
      { path: '', redirectTo:'home'}, 
      { path: 'home', component: HomeComponent }, 
      { path: 'customer', loadChildren: 'app/customer/customer.module#CustomerModule' } 
     ] 
    } 
]; 

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