I have created a small repository with my problem: https://github.com/zegkljan/angular-dart-router-test
What the app does (or is supposed to do)
On the "home" page there is a list of items. You can click the items which brings you to a view of the item itself. In the item view, you have two buttons that, when clicked, show basic/advanced details of the item just below the buttons.
Technical point of view
AppComponent (the root component) has <router-outlet> which it uses to display a child component which is either an ItemListComponent (which displays the list, on path /items) or an ItemComponent which displays the item itself (on path /items/:id). The links in the item list use [routerLink] to navigate to the ItemComponent, and the home link at the top navigates to the ItemListComponent.
ItemComponent has its own <router-outlet> and a set of paths whose partent is the path to the item (i.e. /items/:id). Those paths are /basic and /advanced which are relative to the item's path (so a full path to basic details would be /items/:id/basic).
What is the problem
When clicking on the basic/advanced buttons, the navigate() method of the router returns NavigationResult.INVALID_ROUTE (and therefore no navigation) even though the url passed to navigate() (printed just before calling navigate()) is correct. If you clone/download the repo and run the app, open the browser console and observe.
What am I doing wrong, or what have I misunderstood regarding the AngularDart router and how child routes work?
You're missing the RouterOutlet directive (or routerDirectives which includes RouterOutlet) in the directives list of ItemComponent here: https://github.com/zegkljan/angular-dart-router-test/blob/master/lib/src/item/item_component.dart#L23