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