Angular2 child routes not working

Question

I'm using @angular rc4 "@angular/router": "^3.0.0-beta.2"

I haven't been able to get child routes work, when i start adding child routes i get many kinds of errors: Here's my route code:

{ path: '', redirectTo: 'parentComp'},
{ path: 'parentComp', component: parentContainer, 
        children: [
            {path: 'componenta', component: ComponentA }
        ]
    }

EXCEPTION: Error during instantiation of Router!.BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL EXCEPTION: Error: Invalid route configuration of route '{path: "", redirectTo: "activity"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:77(anonymous function) @ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423

So i add the pathMatch:

{ path: '', redirectTo: 'parentComp', pathMatch: 'full'},
{ path: 'parentComp', component: ActivityContainer, 
    children: [
        {path: 'componenta', component: ComponentA }
    ]
}

Here's the error I get:

app/bootstrapper.routes.ts(5,7): error TS2322: Type '({ path: string; redirectTo: string; pathMatch: string; } | { path: string; component: typeof pare...' is not assignable to type 'Route[]'. Type '{ path: string; redirectTo: string; pathMatch: string; } | { path: string; component: typeof paren...' is not assignable to type 'Route'.

I realized that many of the answers written were about making sure to use the right version, but I'm using the right latest one for routes just as in angular.io So I also have router-deprecated along with it to decrease the number of errors that appear but still, I wasn't able to get the child routes working.

I'm having my shell which will load in its router-outlet the routes, but the minute i go to child routes nothing work. Help appreciated.

Thanks

Answer 1

Not sure what You are trying to do here.

This is what works for me:

{
    path: 'object', --> base path
    component: ObjectComponent, --> parent component, need to end with "Component"
    children: [
        {path: '', redirectTo: 'childa', pathMatch: 'full'}, --> subpath default, this would redirect "domain/object" to "domain/object/childa"
        {path: 'childa', component: AComponent}, --> this would load AComponent into router-outlet tag and set Your path to "domain/object/childa"
        {path: 'childb', component: BComponent}, --> this would load BComponent into router-outlet tag  and set Your path to "domain/object/childb"
    ]

Basically I believe You need to set Your root (path: '') redirection as a child node.

This is ObjectComponent template part:

<button [routerLink]="['/object', 'childb']">Child B</button>
<router-outlet></router-outlet>

Also @Arpit Agarwal answer gives You a lot if detail about inner workings...

Answer 2

The component class name should be written in upper camel case and end in the word "Component". The tutorial explains this in one of their first sections: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html.

The example in their application:

import { Component } from '@angular/core';

@Component({
  selector: 'hero-detail',
})
export class HeroDetailComponent {
}

Then then adding it to the router:

  { path: 'detail/:id', component: HeroDetailComponent },

Try changing your component class names and recompiling

Answer 3

Try redirectTo: '/parentComp' instead of redirectTo: 'parentComp'.

Answer 4

Angular router considers a route with children as a non-terminal route and routing happens to terminal routes only. Angular router expects route to have a default entry for path: ''. Son in your case you should add below code in children array

children: [
        {path: '', redirectTo: componenta, pathMatch: 'full'}
    ]

Moreover whenever we use redirectTo the pathMatch strategy should be full as we want exact path match to redirect. If we keep prefix(not specifiy then default to prefix ) this would cause angular to match a lot of routes to that entry and cause various error.

See this question for further detail

You should get rid of any import of router-deprecated as the error points to mismatch between route declaration and route provider. You need use below code in bootstrap componet to provide routers.

provideRouter(routes)// routes is array of routes defined in your code.  

Also have a look at great article. The article is on alpha8 version but beta2 have no major change except terminal:true is replaced by pathMatch:full