Angular 4 routing issue for child routes in nested router-outlet

Question

My code is as follows :

app component html

<app-header ></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

And routing.module.ts is

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', component: LoginPage, pathMatch: 'full' },
    { path: 'dashboard', loadChildren : './main.module#MainModule' } // lazy load post login success
];

export const appRouter: ModuleWithProviders = RouterModule.forRoot(routes, { enableTracing: true });

Below is my main.componnt.html

<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2">
            <router-outlet name="nav"></router-outlet>
        </nav>
        <section class="col-md-4">
            <router-outlet name="list"></router-outlet>
        </section>
        <section class="col-md-6">
            <router-outlet name="form"></router-outlet>
        </section>
    </div>
</div>

Below is main.module.ts

const childRoutes: Routes = [
  { path: '', component: SideNav, outlet: 'nav' }, // working
  { path: '', component: BlankComponent, outlet: 'form' },// working
  { path: '', component: BlankComponent, outlet: 'list' },// working
  { path: 'someform', component: SomeForm, outlet: 'form' },// issue
  { path: 'somelist', component: SomeList,  outlet: 'list' },// issue
  { path: '**', component: PageNotFound, outlet: 'list' },
];

const mainRoutes: Routes = [
  { path: '', component: MainComponent, children: childRoutes }// works
];
export const mainRouter : ModuleWithProviders = RouterModule.forChild(mainRoutes);

I get below error

Error: Cannot match any routes. URL Segment: 'someform'

Where my router link is [routerLink]="[navObj.url]" where url contain "someform" or "./somelist"

blank path components loading correctly but with path I am facing issue.

is router-outlet inside another components router outlet supported in Angular 4?

What is the correct to implement above? I will add authGuard later.

Answer 1

I think you should make your routes like this :

//routing.module.ts 
const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full'},
    { path: 'login', component: LoginPage, pathMatch: 'full' },
];

//main.module.ts
const childRoutes: Routes = [
    { 
        path: 'dashboard', component: MainComponent , 
        children : [
                        { path: 'newform', component: NewForm, outlet: 'form' },
                        { path: 'testlist', component: TestList, outlet: 'list' }
                    ]
    }
];

Answer 2

Try to arrange your routes in separate file for modules. See one of my project directory structure below.

my sample codes are..

app.routing.ts

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

// import { HomeComponent } from './home/index';
// import { LoginComponent } from './login/index';
// import { LogoutComponent } from './logout/logout.component';
// import { RegisterComponent } from './register/index';

import { AuthGuard, GuestGuard} from './shared/_guards';

import { DashboardComponent } from './dashboard/dashboard.component';
import { AppLayoutComponent } from './_layout/app-layout/app-layout.component';
import { ClientListComponent } from './clients/client-list/client-list.component';

// App routes
const appLayoutRoutes: Routes = [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'clients', component: ClientListComponent },
];

const appRoutes: Routes = [
    { 
        path: '', 
        canActivate: [AuthGuard],
        component: AppLayoutComponent, 
        data: { title: 'App Views' }, 
        children: appLayoutRoutes
    },
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

auth.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { AuthGuard, GuestGuard } from './../shared/_guards';

import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { RegisterComponent } from './register/register.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';


const routes: Routes = [
  { path: 'login', component: LoginComponent ,canActivate : [GuestGuard] },
  { path: 'logout', component: LogoutComponent, canActivate: [AuthGuard] },
  { path: 'register', component: RegisterComponent, canActivate : [GuestGuard] },
  { path: 'reset/password', component: ResetPasswordComponent, canActivate : [GuestGuard] },
];

export const AuthRoutes = RouterModule.forRoot(routes);

auth.module.ts (You can see AuthRoutes imported and added in imports:[ ])

import { SharedModule } from './../_shared/shared.module';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { LoginComponent } from './login/login.component';
import { LogoutComponent } from './logout/logout.component';
import { RegisterComponent } from './register/register.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';
import { AuthService } from './auth.service';


import { AuthRoutes } from './auth.routing';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    SharedModule,
    AuthRoutes
  ],
  declarations: [
    LoginComponent,
    LogoutComponent,
    RegisterComponent,
    ResetPasswordComponent
  ],
  providers: [
    AuthService
  ]
})
export class AuthModule { }