Angular2 nested routing not working

Question

I am working on a small trial project with Angular2 where I have a menu and a sub-menu. Hence I need to have some kind of nested routing for sub-menu. I referred to angular.io site in the case study: Tour of heroes section but was not able to implement it successfully.

My main menu(navigation) has this routing configuration

@RouteConfig([
    { path: '/letter/...', name: 'Letter', component: LetterComponent },
    { path: '/contact', name: 'Contact', component: ContactsComponent },
    { path: '/notes', name: 'Notes', component: NotesComponent }
])

used in the UI(template) as

<ul class="sidebar-nav">
    <li id="menu-title-li">
         <div id="menu-title" class="noselect">MENU</div>
    </li>
    <li>
        <a [routerLink]="['Contacts']">Contacts</a>
    </li>
    <li>
        <a [routerLink]="['/Letter','All']">Letters</a>
    </li>
    <li>
        <a [routerLink]="['Notes']">Notes</a>
    </li>
</ul>
<router-outlet></router-outlet>

Letters section will have a sub-navigation and hence child routes.

sub-menu(sub-navigation) under letters component has been configured as

@Component({
    selector: 'letter',
    templateUrl: './app/Letter/template.html',
    directives: [RouterOutlet, ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
    { path: '/all', component: AlllettersComponent, name: 'All' , useAsDefault: true},
    { path: '/inwards', component: InwardsComponent, name: 'Inwards' },
    { path: '/outwards', component: OutwardsComponent, name: 'Outwards' }
])

used in the UI(template) as

<ul class="nav nav-tabs">
    <li role="presentation">
        <a [routerLink]="['All']">All</a>
    </li>
    <li role="presentation">
        <a [routerLink]="['Inwards']">Inwards</a>
    </li>
    <li role="presentation">
        <a [routerLink]="['Outwards']">Outwards</a>
    </li>
</ul>
<router-outlet name="letter-outlet"></router-outlet>

The main menu works and displays the corresponding template except for letters section. When I click on letters option, the corresponding template of sub-menu is loaded but in the address bar I still see http://localhost:3000/contact which I had navigated to before, I get the following error in my console, and thereafter nothing works.

angular2.dev.js:23877 Error: Component "AppComponent" has no route named "All".

I tried a lot of things that people suggested for similar problems on github and stackoverflow but nothing seems to work.

Is nested routing really supported in angular2? I went through this thread (Router Huge Flaw - Does not allow more than 1 level of nesting #6204) on github but didn't help. Is there any way to get around this problem?

could you try to remove providers: [ROUTER_PROVIDERS] from a child component? — dubadub
– dubadub, Commented Apr 7, 2016 at 21:42
Oh! that did something.. I'm able to navigate through my child routes but 1) templates for child routes are not being loaded 2) when I try navigating to the main routes(level 1), It throws an ERROR Error: Uncaught (in promise): registerPrimaryOutlet expects to be called with an unnamed outlet. — Shri
– Shri, Commented Apr 8, 2016 at 4:52
good, could you change <router-outlet name="letter-outlet"></router-outlet> to just <router-outlet></router-outlet> as well? — dubadub
– dubadub, Commented Apr 8, 2016 at 8:43
wow! and it works! perfect! i struggled for almost 2 days.. please post it as an answer.. would be helpful for many because i feel many people are struggling with this. — Shri
– Shri, Commented Apr 8, 2016 at 10:01

Shri · Accepted Answer · 2016-04-11 04:56:04Z

Considering comments on the questions, the solution is:

Removed providers: [ROUTER_PROVIDERS] from the child component LetterComponent which has sub-routes.
Changed

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

to

<router-outlet></router-outlet>

Hence the final structure goes like this:

AppComponent:

@Component({
    selector: 'my-app',
    templateUrl: `
        <ul class="sidebar-nav">
            <li id="menu-title-li">
                <div id="menu-title" class="noselect">MENU</div>
            </li>
            <li>
                <a [routerLink]="['Contacts']">Contacts</a>
            </li>
            <li>
                <a [routerLink]="['/Letter','All']">Letters</a>
            </li>
            <li>
                <a [routerLink]="['Notes']">Notes</a>
            </li>
        </ul>
        <router-outlet></router-outlet>
    `,
    directives: [
        ROUTER_DIRECTIVES
    ],
    providers: [
        ROUTER_PROVIDERS
    ]
})

@RouteConfig([
    { path: '/letter/...', name: 'Letter', component: LetterComponent },
    { path: '/contact', name: 'Contact', component: ContactsComponent },
    { path: '/notes', name: 'Notes', component: NotesComponent }
])

LetterComponent(child component that has sub-routes):

@Component({
    selector: 'letter',
    templateUrl: `
        <ul class="nav nav-tabs">
            <li role="presentation">
                <a [routerLink]="['All']">All</a>
            </li>
            <li role="presentation">
                <a [routerLink]="['Inwards']">Inwards</a>
            </li>
            <li role="presentation">
                <a [routerLink]="['Outwards']">Outwards</a>
            </li>
        </ul>
        <router-outlet></router-outlet>
    `,
    directives: [RouterOutlet, ROUTER_DIRECTIVES]
})

@RouteConfig([
    { path: '/all', component: AlllettersComponent, name: 'All' , useAsDefault: true},
    { path: '/inwards', component: InwardsComponent, name: 'Inwards' },
    { path: '/outwards', component: OutwardsComponent, name: 'Outwards' }
])

Answering my own question, as somebody with same problem might find useful

Community · Accepted Answer · 2017-05-23 12:25:43Z

0

In fact when using routing you need to have route definitions in the component that you bootstrap for your application. There is no problem to define sub routes in other components.

See this question for more details:

Angular 2 : defining a Router on another Component than the bootstraped one

Edit

From your error, you forgot to define a route named All in the route definition of your AppComponent class.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Apr 7, 2016 at 18:00

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

10 Comments

Shri Over a year ago

ah! that's confusing for a beginner. can you explain and provide a solution here? would be helpful for others too

Thierry Templier Over a year ago

Not so obvious in fact! I would try to move your first @RouteConfig into your AppComponent class...

Shri Over a year ago

my route definitions for main nav are in the component that I bootstrapped for my app(AppComponent), but sub routes are in other component(Letter). you said its not a problem to have so. but my my project doesn't work

Thierry Templier Over a year ago

Oh sorry. I didn't your error correctly. From it, I think that you forgot to define a route named All in the route definition of your AppComponent class.

Shri Over a year ago

why has it been made so complicated? some people even make fun of this on other forums

|

Collectives™ on Stack Overflow

Angular2 nested routing not working

2 Answers 2

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related