##Error
I have implemented nested routing in my app. when application loads its shows login screen after login its redirects to admin page where further child routes exist like user, product, api etc. now when I navigate to admin it by default loads user screen but further <routeLinks>
not working and its shows this error.
Error: Uncaught (in promise): Error: Cannot match any routes: 'product'
After Click Product it shows this
##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 { }
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…