CODEWITHSUNDEEP
angularangular8angular-routing
Aashish Verma
Aashish Verma

Reputation: 103

unable to route component over current component

I am new to angular and working with routing and got stucked in a situation where I am calling question.component from body.component and want to replace it with question.component but getting error. Following is my code

app-routing.module.ts

const routes: Routes = [
  {
    path: 'home', component: HeaderComponent,
    children: [
      { path: '', component: BodyComponent, outlet:'secondary'},
      { path: 'ask', component: QuestionComponent, outlet:'secondary'}
    ]
  },
];

app.component.html

<router-outlet></router-outlet>

header.component.html

<mat-toolbar class="mat-toolbars">
  <span>Header</span>
  <ng-template [ngIf]="!isLoggedIn">
    <button mat-button [matMenuTriggerFor]="menu">Login<mat-icon>login</mat-icon></button>
  </ng-template>
     <mat-menu #menu="matMenu" xPosition="before" >
        <span (click)="$event.stopPropagation();">
        </span>
  </mat-menu>
</mat-toolbar>
<div id="contentwrapper">
   <div class="main_content">
     <router-outlet name="secondary"></router-outlet>
   </div>
</div>

body.component.html

whenever i click on ask button its not routing the question.component over body.component

<mat-card class="card-container">
<button mat-raised-button color="success" [routerLink]="['ask']" skipLocationChange> <mat-icon>speaker_notes</mat-icon> Ask Question</button>
</mat-card>

Error

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/ask'
Error: Cannot match any routes. URL Segment: 'home/ask'
    at ApplyRedirects.noMatchError (router.js:3387)
    at CatchSubscriber.selector (router.js:3351)

Upvotes: 1

Views: 57

Answers (1)

Hitech Hitesh
Hitech Hitesh

Reputation: 1635

You have set the outlet for ask path to secondary outlet so may be you have not added the secondary outlet

 <router-outlet name="secondary"></router-outlet>

and using that link like this


<mat-card class="card-container">
<button mat-raised-button color="success" [routerLink]="[{ outlets: { secondary: ['ask'] } }]" skipLocationChange> <mat-icon>speaker_notes</mat-icon> Ask Question</button>
</mat-card>

Check this POST

Child Routes Angular

angular-router-series-secondary-outlets

Upvotes: 3

Related Questions