Angular2 child routes not working

Ask Time：2016-07-31T15:36:59 Author：Joe Saad

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

Author:Joe Saad，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/38681816/angular2-child-routes-not-working

Arpit Agarwal :

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\n\nchildren: [\n {path: '', redirectTo: componenta, pathMatch: 'full'}\n ]\n\n\nMoreover 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. \n\nSee this question for further detail \n\nYou should get rid of any import of router-deprecated as the error points to mismatch between route declaration and route provider. \nYou need use below code in bootstrap componet to provide routers. \n\nprovideRouter(routes)// routes is array of routes defined in your code. \n\n\nAlso 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",

2016-07-31T08:04:40

Shiv :

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

2016-10-14T07:56:53

Richard H :

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. \n\nThe example in their application: \n\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'hero-detail',\n})\nexport class HeroDetailComponent {\n}\n\n\nThen then adding it to the router:\n\n { path: 'detail/:id', component: HeroDetailComponent },\n\n\nTry changing your component class names and recompiling",

2017-05-19T13:51:41

Angular2 child routes not working