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

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