(router) Child routes handled by same component as parent route

I’m submitting a…

[ x ] Bug report  <!-- Similar issue/PR: Not Found -->

Current behavior

I have 2 child routes handled by the same parent route component as shown:

  {
    path: 'sites',
    component: SiteManagementComponent,
    children: [
      {
        path: 'create',
        component: SiteManagementComponent
      },
      {
        path: ':code',
        component: SiteManagementComponent
      }
    ]
  },
  /*
  {
    path: 'sites/create',
    component: SiteManagementComponent
  },
  {
    path: 'sites/:code',
    component: SiteManagementComponent
  },
  */

On the component, when visiting the child routes the URL told by the activeRoute is always that of the parent route (e.g. ‘sites’ in this case). I’m subscribed to activatedRoute.params and activatedRoute.url, and they both show the url/path to be sites even when navigating to sites/create & sites/:code. The subscription to params & url gets called in every case but the url is just not updated.

The router.url is always updated correctly; if I observe the router.url value at any point in time (e.g. activatedRoute.params, activatedRoute.url, ngOnInit) it always shows sites, sites/create, sites/:code accordingly. The problem seems to be on the activatedRoute.

Notice on my setup above the commented top level routes also handled by the same component; when I take out the child routes and use them top level, the activatedRoute values seem to update correctly.

Expected behavior

The activatedRoute reflects the correct full current URL at all points in time no matter of what component or route hierarchy.

Minimal reproduction of the problem with instructions

Here’s a plunker with the issue reproduced: http://embed.plnkr.co/EQBtMA/

What is the motivation / use case for changing the behavior?

Reliability & accuracy of the ActivatedRoute

Environment

$ ng --version
Angular CLI: 1.5.0
Node: 6.11.2
OS: darwin x64
Angular: 5.0.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.0
typescript: 2.4.2
webpack: 3.8.1

Browser:
Chrome (desktop, mac OS) Version 61.0.3163.100 (Official Build) (64-bit)
(Didn't test other browsers)
 
For Tooling issues:
- Node version: 6.11.2
- Platform:  Mac

[rcadhikari]

Hope this helps stackoverflow ref!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}