Child Routing Angular2 not working without useAsDefault: true

In my below angular2 routing program, routing is not working if i remove useAsDefault: true and getting the below error.

EXCEPTION: Link “[“Pen”]” does not resolve to a terminal instruction.
in [[‘Pen’] in AppComponent@4:19]

**This is Child routing Code:**

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {RouteParams} from "angular2/router";
import {Pen1Component} from "./pen/app.component.pen1";
import {Pen2Component} from "./pen/app.component.pen2";


@Component({
    templateUrl:'dev/products/app.component.pen.html'
    template: `
            <nav>
                <ul>
                <li>
                <a [routerLink]="['Pen1']">Pen1</a></li>

                <li>
                <a [routerLink]="['Pen2']">Pen2</a></li>
                </ul>

            </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    })
@RouteConfig([
    {path: '/', name: 'Pen1', component: Pen1Component},
    {path: '/pen2', name: 'Pen2', component: Pen2Component}

export class PenComponent {
}

This is parent routing code:

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {PenComponent} from './products/app.component.pen';
import {BookComponent} from './products/app.component.book';


@Component({
    selector: 'my-app',
    template: `
            <nav>
                <ul>
                <li>
                <a [routerLink]="['Pen']">Pen</a></li>

                <li>
                <a [routerLink]="['Book',{id:1}]">Book</a></li>
                </ul>

            </nav>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES],
    providers:[ROUTER_PROVIDERS]

})

@RouteConfig([
    {path: '/pen/...', name: 'Pen', component: PenComponent},
    {path: '/book/:id', name: 'Book', component: BookComponent}


])


export class AppComponent {

}

But If add this code, its working fine.

@RouteConfig([
    {path: '/', name: 'Pen1', component: Pen1Component, useAsDefault: true},
    {path: '/pen2', name: 'Pen2', component: Pen2Component}

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

Please try this code in app.component.ts. import {Component} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router'; import {PenComponent} from './products/app.component.pen'; import {BookComponent} from './products/app.component.book'; @Component({ selector: 'my-app', template: ` <nav> <ul> <li> <a [routerLink]="['Penn']">Pen</a></li> <li> <a [routerLink]="['Book',{id:1}]">Book</a></li> </ul> </nav> <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES], providers:[ROUTER_PROVIDERS] }) @RouteConfig([ {path: '/penn/', name: 'Penn', component: PenComponent}, {path: '/book/:id', name: 'Book', component: BookComponent} ]) export class AppComponent { } I replace the Pen with Penn. You can run Angular2 without useAsDefault: true. This will not return any error, output will be none in this case.