Child Rout Params is undefined

Question

No sure what I am missing , I have a child rout and the parameter always undefined...however, it does load the right component but somehow the parameters are not being read. ( I do see the parameters on the url)

app rout

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

// these would equal welcome component

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent }
];

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

search rout

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

import { SearchComponent } from '../search/search.component';


const routes: Routes = [

    { path: 'search', component: SearchComponent,

        children: [

            { path: ':id/:name', component: SearchComponent }
        ]

    },
];

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

search.component (I tried both snapshot an observable)

console.log('id ===========>' + this._rout.snapshot.params['id']);
        this._rout.params.subscribe(params => {
            console.log('id2 ===========>' + params['id']);

        });

search.module

import { NgModule } from '@angular/core';
import { SearchComponent } from '../search/search.component'
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
from '@angular/forms';
import { SearchRoutingModule } from './search.routing';


@NgModule({

    imports: [HttpModule, BrowserModule,  SearchRoutingModule


    ],
    declarations: [SearchComponent],
    providers: [SearchService],
    exports: []

})
export class SearchModule { }

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { HttpModule } from '@angular/http';
import { CommonModule } from '@angular/common';
import { SearchModule } from './search/search.module';


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule, HttpModule, SearchModule, AppRoutingModule, CommonModule
    ],
    providers: [AppComponentService],
    bootstrap: [AppComponent]

})
export class AppModule { }

Answer 1

The problem being params not received in your SearchComponent is that, the parent route and the child route are both pointing to the same component.

Angular is loading the component for parent route (without params), but the url still points to the child route, because angular has found a route configured against it, but failed to load since it did not find any router-outlet inside parent.

Instead of making a child route, make it as a sibling route to the parent route. It just loads fine.

You may reconfigure your routes this way

{ path: 'search', component : SearchComponent, pathMatch : 'prefix'}, 
{ path: 'search/:id/:name', component: SearchComponent }

See this stackblitz for your reference

EDIT :

It does work with your current routes if you add <router-outlet> in SearchComponent, but that will load same component in nest. One for parent and one for child.

Instead you can create another root component for SearchModule as DummyComponent, activating it for parent route and then load all the child components inside it.