Angular 4 routes with submodules

Question

I'm trying to use Core UI Angular seed.

here're my routing files: 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\views\clients\organizations\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: '',
        component: IndexComponent,
        data: {
            title: 'Organizations'
        },
        children: [
            {
                path: 'create',
                component: CreateComponent,
                data: {
                    title: 'Add organization'
                }
            }
        ]
    },
];

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

So, while navigating:

http://localhost:4200/#/dashboard - and renders dashboard http://localhost:4200/#/clients/organizations - renders clients IndexComponent

but

http://localhost:4200/#/clients/organizations - also renders clients IndexComponent http://localhost:4200/#/clients/organizations/create - also renders clients IndexComponent

Breadcrumbs render in correct way.

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

Here're routes worked good to me:

clients:

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 {
}

organizations

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 {
}

Answer 2

Your routine definition is wrong, It should be as follow, app\views\clients\organizations\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 {
}