angular: [Router 3.0.0-alpha.8] Using a child routing results in exceptions in both parent and child

I’m submitting a …

[x] bug report
[ ] feature request
[ ] support request

Current behavior

I configure the following paths and get the following exceptions in the web console when I access those paths on a web browser:

  • /1: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'SomeOtherComponent'
  • /1/2: EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: '2'

Reproduction of the problem

I cannot get it “working” with Plunker even when opening it on a separate window, but I can reproduce the issue locally with a main.ts-only app:

    import { Component } from '@angular/core';
    import { bootstrap } from '@angular/platform-browser-dynamic';
    import { provideRouter, RouterConfig, ROUTER_DIRECTIVES } from '@angular/router';

    @Component({
        selector: 'app',
        template: "AppComponent <router-outlet></router-outlet>",
        directives: [ROUTER_DIRECTIVES]
    })
    class AppComponent {
    }

    @Component({
        template: "SomeComponent <router-outlet></router-outlet>"
    })
    class SomeComponent {
    }

    @Component({
        template: "SomeOtherComponent"
    })
    class SomeOtherComponent {
    }

    export const routes: RouterConfig = [
      { path: '1', component: SomeComponent, children: [
        { path: '2', component: SomeOtherComponent },
        { path: '', component: SomeOtherComponent }
      ] },
    ];

    bootstrap(AppComponent, [
        [
            provideRouter(routes)
        ]
    ])
    .catch(err => console.error(err));

Please tell us about your environment:

  • Angular version: 2.0.0-rc.3
  • Browser: Firefox 47.0
  • Language: TypeScript 1.8.10

Keywords: router, route, routes, children

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 16 (6 by maintainers)

Most upvoted comments

@Gallaecio since your path: '1' route is a parent, it needs ROUTER_DIRECTIVES also