0

Why does this subroute not work? I checked this SO question A similar issue. I implemented the solution given, by moving the more specific route to be first, but this did not solve the problem.

App.component.ts

import {Whatsup} from "./whatsup.component";
    ...
    template:`

    <li id="whatsup" (click)="loadField('whatsup')" ><a [routerLink]="['/whatsup/...']"> Whatsup?</a></li>
    <router-outlet></router-outlet>
    `
    ...

    @Routes([
        {path: '/whatsup/...', component: Whatsup}
    ])

Whatsup.component.ts

    import {Calendar} from "./Calendar.component";

        ...

        template:`
        <li class="list-group-item"><a [routerLink]="['/today']">{{today | date:'EEEEE'}}</a></li>
        <router-outlet></router-outlet>
        `
        ...

@Routes([
    {path:"/today", component: Calendar}
])

Whatsup loads successfully, but when I click on the link in Whatsup I get this error:

Unhandled Promise rejection: Cannot match any routes. Current segment: 'today'. Available routes: ['/whatsup/...', '/our-recommendations', '/leave-review', '/deals-in-town']. ; Zone: angular ; Task: Promise.then ; Value: Object { message: "Cannot match any routes. Current se…", stack: "BaseException@http://localhost:3000…" }

Community
  • 1
  • 1
slipperypete
  • 5,358
  • 17
  • 59
  • 99

1 Answers1

0

/... is not necessary anymore in the RC.x router and also isn't recognized. Just remove it:

{path: '/whatsup', component: Whatsup}

The RC.x router has several issues and it is currently unclear how the Angular team will proceed. If you're starting migrating from the router-deprecated it's probably better to stay with the deprecated router until it's clear how the router story will move forward.

Some known issues with the @angular/router

  • ensure that you either inject the router (constructor(router:Router) {}) to your AppComponent or that the AppComponents template contains a routerLink, otherwise the router won't be invoked at all.

  • order the routes inside @Routes() so that the more specific routes come first and the less specific routes come last, otherwise routes after the first won't be found.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Taking the '...' away did not solve the problem, I guess I will try and revert to the router-deprecated for now. – slipperypete Jun 05 '16 at 10:48
  • I just saw that you have `/...` also in `[routerLink]="['/whatsup/...']`. This is not a thing even in `@angular/router-deprecated`. There is also http://stackoverflow.com/questions/37605119/angular2-router-angular-router-how-to-set-default-route/37605802#37605802 but I also think staying with `@angular/router-deprecated` is a good decision currently. – Günter Zöchbauer Jun 05 '16 at 10:52
  • 1
    I could not get the new router to work, so I reverted to @angular/router-deprecated. To get this working, I found this link to be helpful. http://stackoverflow.com/questions/37000243/angular2-router-deprecated-dependencies-not-being-loaded. – slipperypete Jun 05 '16 at 12:46