child Routing in angular2 getting error

Question

My Page Layout look like this one

-----------------------------------------------------
HEADER MENU --> Page1  <Page2>
-----------------------------------------------------
Page1 Child1 |
Page1 Child2 |       MAIN CONTENT
Page1 Child2 |
----------------------------------------------------
          FOOTER
----------------------------------------------------

if user click on Page1 i want to Refresh the Menus on the Left to list children for Page1, if i click Page 2 than i want to refresh the list of menu and display childrens of Pages 2

This is how my router look currently, but i am getting the error

core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''

Error: Cannot match any routes. URL Segment: '' at ApplyRedirects.noMatchError

index.html

index.html

<div class="container">
    <div class="row">
    
    </div>
    <div class="row">
        <div class="col-md-2"><router-outlet></router-outlet></div>
        <div class="col-md-10"><router-outlet name="main"><h2>Main Content Here</h2></router-outlet></div>
    </div>
</div>

app.module.ts


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { Page1Component } from './Page1/Page1.component';
import { Page1Child1Component } from './Page1/Page1Child1/Page1Child1.component';
import { Page2Component } from './Page2/Page2.component';
import { RouterModule } from '@angular/router';


@NgModule({
    imports: [BrowserModule,

            RouterModule.forRoot([
                { path: '', redirectTo: 'Page1', pathMatch: 'full' },
                {
                    path: 'Page1', component: Page1Component,
                    children: [
                        { path: '', redirectTo: 'Page1Child1', pathMatch: 'full' },
                        { path: 'Page1Child1', component: Page1Child1Component }
                    ]

                },
                { path: 'Page2', component: Page2Component }
            ])
        ],
    declarations: [AppComponent, Page1Component, Page2Component, Page1Child1Component],
    bootstrap: [AppComponent]
})
export class AppModule { }

screenshot the UI looks as expected but there is error in the console window

core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'Page1Child1Component'
Error: Cannot find primary outlet to load 'Page1Child1Component'
    at getOutlet

Page1.component

import { Component } from '@angular/core';
@Component({
    selector: 'Page1',
    template: `<h1>This is from Page1 </h1>
    <ul>
  <li *ngFor="let item of links; let i = index">
        <a [routerLink]="['Page1Child1']" routerLinkActive="active" outlet:"main">{{item}}</a>
  </li>
</ul>
   `
})
export class Page1Component {
    links: any[] = [
    'Page1 Child1',
    'Page1 Child2'
    ];

}

Now as soon as i update the Pag1Component to use named outlet it throws parsing error.

This just blows out the whole page and nothing is displayed, console window throws the parsing error

Error: (SystemJS) Template parse errors:(…)(anonymous function) @ (index):20ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339

Is there a better way of doing this

score 0 · Answer 1 · answered Oct 23 '16 at 03:43

0

Because there's no root path in the children. When the Page1 path first loads, it has a router outlet where it tries to load child routes, but with Page1 there is a route configured with ''. This would be required when you go to the Page1 url. If you went to Page1/Page1Child1, it knows the component, but Page1 (which would need to map to '') doesn't exist

So just add a redirect to the default child route

children: [
  { path: '', redirectTo: 'Page1Child', pathMatch: 'full' }
  { path: 'Page1Child1', component: Page1Child1Component}
]

answered Oct 23 '16 at 03:43

Paul Samsotha

205,037
37
486
720

core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '' Error: Cannot match any routes. URL Segment: '' at ApplyRedirects.noMatchError still getting the error, still don't understand why do i need to give empty route, i want to display all the children for Page1 when user clicks page1, and don't want to navigate to Page1Child1. only navigate to that explicitly when user clicks on the hyperlink from displayed menu. – user3799325 Oct 23 '16 at 03:54
To use `children` for `Page1Component`, you need a router-outlet in that component. This is how `children` works. And if you have a router-outlet in the `Page1Child1Component` then it need s default route when you navigate to `/Page`. If you don't want `Page1Child1Component` to have its own router-outlet, then don't use `children`. Just add the route `/Page1/Page1Child` to root routing, without using `children` for the `Page1` route – Paul Samsotha Oct 23 '16 at 03:59
You can have a component that for the path `''` (instead of redirecting) if you want, that shows all the children. – Paul Samsotha Oct 23 '16 at 04:07

child Routing in angular2 getting error

1 Answers1