Routing to named outlets doesn't work with non-empty paths

Somebody, create another issue with the representation, or it won't be fixed. I can't. Sorry

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In case of a named router-outlet, routing works only with empty paths. This is written to the browser console: Error: Cannot match any routes. URL Segment: ‘a’

Expected behavior

Routing should create components whether the outlet is named or not.

Minimal reproduction of the problem with instructions

Here’s a code for a simple routing app. It’s got three paths (/, /a, /b) and a button for each. The paths are routed to components. The code has got several Routes configurations. Some of them are working (navigating to a know path renders a component), others are bugged.

import {Component, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule, Routes} from '@angular/router';

@Component({
  selector: 'our-main',
  template: `
    <a href="">Navigate to /</a>
    <a href="a">Navigate to /a</a>
    <a href="b">Navigate to /b</a>
    <div>router-outlet name='the-out':</div>
    <router-outlet name="the-out"></router-outlet>
    <div>router-outlet, name='':</div>
    <router-outlet></router-outlet>
  `,
  styles: ['a { display: block; }']
})
class MainComponent {}

@Component({ selector: 'our-default', template: '<h1>Default</h1>' })
class DefaultComponent {}

@Component({ selector: 'our-a', template: '<h1>A</h1>', })
class AComponent {}

@Component({ selector: 'our-b', template: '<h1>B</h1>' })
class BComponent {}

const ROUTES_OK_1: Routes = [
  { path: '', component: DefaultComponent, outlet: 'the-out', pathMatch: 'full'},
  { path: 'a', component: AComponent, outlet: ''},
  { path: 'b', component: BComponent, outlet: ''}
];

const ROUTES_OK_2: Routes = [
  { path: '', component: DefaultComponent, outlet: 'the-out'},
  { path: 'a', component: AComponent, outlet: ''},
  { path: 'b', component: BComponent, outlet: ''}
];

const ROUTES_OK_3: Routes = [
  { path: '', component: DefaultComponent, outlet: '', pathMatch: 'full'},
  { path: 'a', component: AComponent, outlet: ''},
  { path: 'b', component: BComponent, outlet: ''}
];

const ROUTES_BUG_1: Routes = [
  { path: '', component: DefaultComponent, outlet: 'the-out', pathMatch: 'full'},
  { path: 'a', component: AComponent, outlet: 'the-out'},
  { path: 'b', component: BComponent, outlet: 'the-out'}
];

const ROUTES_BUG_2: Routes = [
  { path: '', component: DefaultComponent, outlet: '', pathMatch: 'full'},
  { path: 'a', component: AComponent, outlet: 'the-out'},
  { path: 'b', component: BComponent, outlet: 'the-out'}
];

@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(ROUTES_BUG_1)],
  declarations: [MainComponent, DefaultComponent, AComponent, BComponent],
  bootstrap: [MainComponent]
})
export class AppModule {}

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

I don’t know. I’m just learning. I can’t even tell why there’re named router-outlets at all. The developers should know better. Please tell us about your environment: Linux Mint 17.3 IDE IntellijIDEA 2017.1.2 package manager yarn HTTP server lite-server

• Angular version: 4.0.0
• Browser: Firefox 53
• Language: TypeScript 2.1.0
• Node (for AoT issues): node --version = 7.4.0

[kamranahmedse]

I have the same issue, component doesn’t get added to the outlet for non-empty paths i.e. below does not work

{
    path: 'some-path',
    component: SidebarComponent,
    outlet: 'sidebar'
}

But it does work for the non-empty paths. For now I have been using the below stated hack to achieve it, since it seems to be working when the path is empty.

{
    path: 'some-path',
    children: [
        {
            path: '',
            component: SidebarComponent,
            outlet: 'sidebar'
        }        
    ]
}

I am not sure if it is by design or not as I am not able to find anything regarding this in the documentation. Would love a word from the core team? /@vicb

PS, I have it in one of the feature modules that is lazy loaded and haven’t tried it in the parent module so I am not sure about the behavior in parent module.

[webmatrixxxl]

Same problem with angular 4.3.6