Malik Kashmiri Malik Kashmiri - 1 month ago 6
TypeScript Question

Error: Uncaught (in promise): Error: Cannot match any routes Angular 2

Error



I am implemented nested routing in my app. when application loads its shows login screen after login its redirect to admin page where further child routes exist like user, product, api etc. now when I navigate to admin it byddefault loads user screen but further
<routeLinks>
not working and its shows this error.
Error: Uncaught (in promise): Error: Cannot match any routes: 'product'


enter image description here

After Click Product it shows this
enter image description here

Code main.ts



import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from '../app/app.routes';
import { AppComponent } from '../app/app.component';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);


app.component



import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
selector: 'demo-app',
template: `

<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
`,
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }


app.routes



import { provideRouter, RouterConfig } from '@angular/router';

import { AboutComponent, AboutHomeComponent, AboutItemComponent } from '../app/about.component';
import { HomeComponent } from '../app/home.component';

export const routes: RouterConfig = [
{
path: '',
component: HomeComponent
},
{
path: 'admin',
component: AboutComponent,
children: [
{
path: '',
component: AboutHomeComponent
},
{
path: '/product',
component: AboutItemComponent
}
]
}
];

export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];


home.component



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

@Component({
selector: 'app-home',
templateUrl:'../app/layouts/login.html'
})
export class HomeComponent { }


about.component



import { Component } from '@angular/core';
import { ActivatedRoute, ROUTER_DIRECTIVES } from '@angular/router';

@Component({
selector: 'about-home',
template: `<h3>user</h3>`
})
export class AboutHomeComponent { }

@Component({
selector: 'about-item',
template: `<h3>product</h3>`
})
export class AboutItemComponent { }

@Component({
selector: 'app-about',
templateUrl: '../app/layouts/admin.html',
directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }

Answer

I think that your mistake is in that your route should be product instead of /product.

So more something like

  children: [
  { 
    path: '', 
    component: AboutHomeComponent
   },
  { 
    path: 'product', 
    component: AboutItemComponent 
  }
Comments