Angular2 route Component has no route config

Question

Hi I am trying to createa routing system for my applciation but I seem to have hit some issues when creating a route that has no child routes. Here is my code:

bootstrap(CommercifyComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
]);   

@Component({                                                     
    selector: 'commercify',
    templateUrl: './app/commercify.view.html',
    styleUrls: ['./app/commercify.style.css'],
    directives: [ROUTER_DIRECTIVES]  
})
@RouteConfig([
    { path: '/Dashboard', name: 'Dashboard', component: DashboardComponent },       
    { path: '/Catalog/...', name: 'Catalog', component: CatalogComponent, useAsDefault : true }
])          
export class CommercifyComponent {}

This is my CommercifyComponent view:

This is my DashboardComponent:

 @Component({
    selector: 'dashboard',
    template: '<base-component>This is dashboard component</base-component>',
    directives: [BaseComponent, ROUTER_DIRECTIVES]   
})
export class DashboardComponent { }

This is the base component userd in dashboard:

@Component({
    selector: 'base-component',
    templateUrl: 'app/common/components/base.view.html',
    styleUrls: ['app/common/components/base.style.css'],
    directives: [LeftNavbarComponentt]
})
export class BaseComponent { }

And this is its view:

 <left-navbar></left-navbar>
 <ng-content></ng-content>

This is the LeftNavbarComponent:

@Component({
    selector: 'left-navbar',
    templateUrl: 'app/common/components/left-navbar.view.html',
    styleUrls: ['app/common/components/left-navbar.style.css'],
    directives: [ROUTER_DIRECTIVES]
})       
export class LeftNavbarComponent {
    private router: Router;

    constructor(router: Router) {
       this.router = router;
    }

    public isRouteActive(routeName: string) {
         return this.router.isRouteActive(this.router.generate([routeName]));
     } 
}

This is the left navbar html:

<nav class="left-navbar navbar-inverse navbar">
<ul class="list-unstyled">
    <li class="text-center menu-item">
        <a href=""
           class="navbar-link left-navbar-link"
           [class.navbar-link-active]="isRouteActive('Dashboard')"
           [routerLink]="['Dashboard']">
            <i class="menu-icon fa fa-tachometer fa-3x"></i>
            <span class="left-arrow"></span>
            Dashboard
        </a>
        <ul class="child-menu list-unstyled">
            <li>Dashboard 1</li>
            <li>Dashboard 1</li>
            <li>Dashboard 1</li>
        </ul>
    </li>
    <li class="text-center menu-item">
        <a href="" class="navbar-link left-navbar-link"
           [class.navbar-link-active]="isRouteActive('Catalog')"
           [routerLink]="['Catalog']">
            <i class="menu-icon fa fa-shopping-basket fa-3x"></i>
            <span class="left-arrow"></span>
            Catalog
        </a>
    </li>
</ul>

This is the catalog component:

@Component({
    templateUrl: './app/catalog/catalog.view.html',
    directives: [ROUTER_DIRECTIVES, BaseComponent]
})
@RouteConfig([
    { path: '/Templates', name: 'Templates', component: TemplatesComponent, useAsDefault: true },
])                                     
export class CatalogComponent {}

And finaly this is the the CatalogComponent view:

<router-outlet></router-outlet>

As it can be seen from the code my CommercifyComponent has 2 routes configured Dashboard which will never have a child route and Catalog which has 1 child route Template for wich I omited the rest of the code cause its not relevant to the current question.

By default when the application loads I will be taken to the following url:

http://localhost:5000/Catalog/Templates

and the link that has set [routerLink]="['Catalog']" will have a class of router-link-active but when I try to click the link with [routerLink]="['Dashboard']" I get the following exceptions:

Looking at this code makes me thing that I should add a RouteConfig to the DashboardComponent but I do not want to have any child routes for this component.

What am I doing wrong here?

Don't you have to import the DashboardComponent and CatalogComponent in the CommercifyComponent? — Austin
Seems like it doesn't like the fact that you're specifying a route on a child (LeftNavbarComponent) of DashboardComponent, which does not have child routes. So you're saying you don't want child routes of the dashboard component, but you're specifying a route in a child of it — Austin

Austin Austin · Accepted Answer · 2016-03-29T19:50:14

Seems like it doesn't like the fact that you're specifying a route on a child (LeftNavbarComponent) of DashboardComponent, which does not have child routes. So you're saying you don't want child routes of the dashboard component, but you're specifying a route in a child of it

Angular2 route Component has no route config

1 Answers