Error: cannot match any routes. Segment URL: - Angular 2

Question

I am new to angular2. I am trying to figure out how to use multiple <router-outlets> in a specific template. I went through some QA, but could not solve my error.

router.module.ts

 const routes: Routes = [ { path: '', redirectTo: 'one', pathMatch: 'full' }, { path: 'two', component: ClassTwo, children: [ { path: 'three', component: ClassThree, outlet: 'nameThree', }, { path: 'four', component: ClassFour, outlet: 'nameFour' } ] },]; 

component1.html

 <h3>In One</h3> <nav> <a routerLink="/two" class="dash-item">...Go to Two...</a> <a routerLink="/three" class="dash-item">... Go to THREE...</a> <a routerLink="/four" class="dash-item">...Go to FOUR...</a> </nav> <router-outlet></router-outlet> // Successfully loaded component2.html <router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three' <router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three' 

component2.html

 <h3>In two</h3> 

component3.html

 <h3>In three</h3> 

component4.html

 <h3>In four</h3> 

Below is a screenshot of my current output:

When I click ... Go to two ... In two printed . But clicking on the other two links gives me an error Unable to match any routes

Answer 1

I decided it myself. Made some small structural changes. The route from Component1 to Component2 is performed by one <router-outlet> . Component 2 - Component3 and Component4 are executed by several <router-outlet name= "xxxxx"> . Received Content:

Component1.html

 <nav> <a routerLink="/two" class="dash-item">Go to 2</a> </nav> <router-outlet></router-outlet> 

Component2.html

  <a [routerLink]="['/two', {outlets: {'nameThree': ['three']}}]">In Two...Go to 3 ... </a> <a [routerLink]="['/two', {outlets: {'nameFour': ['four']}}]"> In Two...Go to 4 ...</a> <router-outlet name="nameThree"></router-outlet> <router-outlet name="nameFour"></router-outlet> 

'/two' represents the parent component, and ['three'] and ['four'] represents the link to the corresponding children of component2, Component3.html and Component4.html are the same as in the question.

router.module.ts

 const routes: Routes = [ { path: '', redirectTo: 'one', pathMatch: 'full' }, { path: 'two', component: ClassTwo, children: [ { path: 'three', component: ClassThree, outlet: 'nameThree' }, { path: 'four', component: ClassFour, outlet: 'nameFour' } ] },]; 

Answer 2

please change router.module.ts as:

 const routes: Routes = [ { path: '', redirectTo: 'one', pathMatch: 'full' }, { path: 'two', component: ClassTwo, children: [ { path: 'three', component: ClassThree, outlet: 'nameThree', }, { path: 'four', component: ClassFour, outlet: 'nameFour' }, { path: '', redirectTo: 'two', pathMatch: 'full' } ] },]; 

and in component1.html

 <h3>In One</h3> <nav> <a routerLink="/two" class="dash-item">...Go to Two...</a> <a routerLink="/two/three" class="dash-item">... Go to THREE...</a> <a routerLink="/two/four" class="dash-item">...Go to FOUR...</a> </nav> <router-outlet></router-outlet> // Successfully loaded component2.html <router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three' <router-outlet name="nameFour" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'