Angular 2. Problems of routing

Question

I can't configure the route parameters in the list view. When I click on a link, the ContentViewer component does not open. Debugging writes errors:

1.Uncaught (in promise): Error: Cannot match any routes.

2.Unhandled Promise rejection: Cannot match any routes. URL Segment: 'components/input' ; Zone: angular ; Task: Promise.then ; Value:

This is my main service.

const LSNS  = [
{   name: 'Helpers' , 
items: [
    { id : "autocomplete" , name : "Autocomplete" },
    { id : "checkbox" , name : "Checkbox" },
    { id : "input" , name : "Input" },
   ]
},
{    name: 'front-back-end',
 items: [
    { id : "video_chat", name : "Video chat" },
    { id : "audio_chat", name : "Audio chat" },
    { id : "simple_chat", name : "Simple chat"},
    { id : "another", name : "Another"}
     ]
}
]
 const BMJ = LSNS.reduce((function(a,b){
        return a.concat(b.items);
 }), []);

@Injectable()
 export class LSNDiscriptionService {
    getItemLSNS(): Hlsns[] {
    return LSNS;
}; 
    getBMJ(id:string) {
        return BMJ.find(bm => bm.id === id);
    };
 };

My routing.

     { path: 'web_app', component: LeftSideNav,
    children:[
        { path:'', component: BossContent },
        { path:'components/:id', component: ContentViewer }

Html

    <nav *ngFor="let lsn of lsns" class="lsnss" > 
    <h3>{{ lsn.name }}</h3>
        <ul class="lsns">
            <li *ngFor="let bm of lsn.items" class="lop" > 
                <a [routerLink]="['/components', bm.id]">{{bm.name}}</a>

Component that is not displayed

import { Component, OnInit }               from '@angular/core';
import { ActivatedRoute }          from '@angular/router';
import { LSNDiscriptionService, LSNSItem } from '../common-
service/common.service';

export class ContentViewer implements OnInit  {
bm:LSNSItem;
constructor( public lds:LSNDiscriptionService,
             private _route:ActivatedRoute){}

ngOnInit():void {    
  this._route.params.subscribe(params => this.bm = 
  this.lds.getBMJ(params['id']));     
 };
 }

Kasper Due Kasper Due · Accepted Answer · 2017-07-10T22:46:29

Your current implementation indicates an absolute route, where you want to navigate to a child route. Adding the parent path in front of the child route might solve the problem.

<a [routerLink]="['/web_app/components', bm.id]">{{bm.name}}</a>

Angular 2. Problems of routing

1 Answers