Angular 4 Routen mit Submodulen

Question

Ich versuche Core UI Angular Seed zu verwenden.

here're meine Routing-Dateien: app/app.routing.js

import {NgModule} from '@angular/core'; 
import {Routes, RouterModule} from '@angular/router'; 

// Import Containers 
import { 
    FullLayoutComponent, 
    SimpleLayoutComponent 
} from './containers'; 

export const routes:Routes = [ 
    { 
     path: '', 
     redirectTo: 'dashboard', 
     pathMatch: 'full', 
    }, 
    { 
     path: '', 
     component: FullLayoutComponent, 
     data: { 
      title: 'Home' 
     }, 
     children: [ 
      { 
       path: 'dashboard', 
       loadChildren: './views/dashboard/dashboard.module#DashboardModule' 
      }, 
      { 
       path: 'clients', 
       loadChildren: './views/clients/clients.module#ClientsModule' 
      }, 
     ] 
    } 
]; 

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

app/views/clients/clients.routing.ts

import {NgModule} from '@angular/core'; 
import { 
    Routes, 
    RouterModule 
} from '@angular/router'; 

import {ClientsComponent} from './clients.component'; 

const routes:Routes = [ 
    { 
     path: '', 
     component: ClientsComponent, 
     data: { 
      title: 'Clients' 
     }, 
     children: [ 
      { 
       path: 'organizations', 
       loadChildren: './organizations/organizations.module#OrganizationsModule' 
      }, 
     ] 
    }, 
]; 

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

App \ Ansichten \ Clients \ Organisationen \ Organisationen.Routing.ts

import {NgModule} from '@angular/core'; 
import { 
    Routes, 
    RouterModule 
} from '@angular/router'; 

import {IndexComponent} from './index.component'; 
import {CreateComponent} from './create.component'; 

const routes:Routes = [ 
    { 
     path: '', 
     component: IndexComponent, 
     data: { 
      title: 'Organizations' 
     }, 
     children: [ 
      { 
       path: 'create', 
       component: CreateComponent, 
       data: { 
        title: 'Add organization' 
       } 
      } 
     ] 
    }, 
]; 

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

Also, während der Navigation:

http://localhost:4200/#/dashboard - und macht Armaturenbrett http://localhost:4200/#/clients/organizations - macht Kunden IndexComponent

aber

http://localhost:4200/#/clients/organizations - auch Kunden IndexComponent http://localhost:4200/#/clients/organizations/create macht - auch macht Kunden IndexComponent

Paniermehl rendern in korrekter Weise.

ClientsModule

import {NgModule} from '@angular/core'; 

import {ClientsComponent} from './clients.component'; 
import {ClientsRoutingModule} from './clients.routing'; 

@NgModule({ 
    imports: [ 
     ClientsRoutingModule, 
    ], 
    declarations: [ 
     ClientsComponent, 
    ] 
}) 
export class ClientsModule { 
} 

OrganizationsModule

import {NgModule} from '@angular/core'; 
import {CommonModule} from '@angular/common'; 

import {OrganizationsRoutingModule} from './organizations.routing'; 

import {ListComponent} from './components/list.component'; 

import {IndexComponent} from './index.component'; 
import {ViewComponent} from './view.component'; 
import {CreateComponent} from './create.component'; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     OrganizationsRoutingModule, 
    ], 
    declarations: [ 
     ListComponent, 
     IndexComponent, 
     CreateComponent, 
     ViewComponent 
    ] 
}) 
export class OrganizationsModule { 
} 

Answer 1

Ihre Routine Definition ist falsch, es sollte wie folgt sein, app \ views \ clients \ Organisationen organizations.routing.ts \

import {NgModule} from '@angular/core'; 
import { 
    Routes, 
    RouterModule 
} from '@angular/router'; 

import {IndexComponent} from './index.component'; 
import {CreateComponent} from './create.component'; 

const routes:Routes = [ 
    { path: 'create', component: CreateComponent, data: { title: 'Add organization' }}, 
    { 
     path: '', 
     children: [ 
      { path: '', component: IndexComponent}, 
      { path: ':id', component: ViewComponent } //if you want to show detail view by id 
     ] 
    } 
]; 

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

Answer 2

Hier sind die Routen gut zu mir:

Kunden:

import {NgModule} from '@angular/core'; 
import { 
    Routes, 
    RouterModule 
} from '@angular/router'; 

import {ClientsComponent} from './clients.component'; 

const routes:Routes = [ 
    {path: '', component: ClientsComponent, data: {title: 'Clients'}}, 
    { 
     path: '', 
     data: { 
      title: 'Clients' 
     }, 
     children: [ 
      { 
       path: 'organizations', 
       loadChildren: './organizations/organizations.module#OrganizationsModule' 
      }, 
     ] 
    }, 
]; 

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

Organisationen

import {NgModule} from '@angular/core'; 
import { 
    Routes, 
    RouterModule 
} from '@angular/router'; 

import {IndexComponent} from './index.component'; 
import {CreateComponent} from './create.component'; 

const routes:Routes = [ 
    { path: '', component: IndexComponent, data: { title: 'Organizations list' }}, 
    { 
     path: '', 
     data: { 
      title: 'Organizations' 
     }, 
     children: [ 
      { path: 'create', component: CreateComponent, data: { title: 'Add organization' }}, 
      //{ path: ':id', component: ViewComponent } //if you want to show detail view by id 
     ] 
    } 
]; 

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