Angular 2: Route generator for '...' was not included in parameters passed

Question

So I've got the following piece of code inside my AuthenticationService. After login credentials are checked, the user get's redirected to their profile:

authentication.service.ts:

redirectUser(username:string):void {
  // Redirect user to profile on successful login
  this.router.navigate(['../Profile/Feed', {username: username}]);
}

And it all worked fine, but ever since I introduced some child routes inside the ProfileComponent, I ran into some errors. First of all, this is my AppComponent with the RouteConfig:

app.ts:

import {Component, ViewEncapsulation} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';

import {HomeComponent} from '../home/home';

import {AuthenticationService} from '../../services/authentication.service';
import {LoginComponent} from '../login/login';
import {ProfileComponent} from '../profile/profile';
import {ProfileService} from '../../services/profile.service';

@Component({
  selector:      'app',
  viewProviders: [AuthenticationService, ProfileService, HTTP_PROVIDERS],
  encapsulation: ViewEncapsulation.None,
  directives:    [
    ROUTER_DIRECTIVES
  ],
  templateUrl:   './components/app/app.html'
})

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/inloggen', component: LoginComponent, as: 'Login'},
  {path: '/profile/:username/...', component: ProfileComponent, as: 'Profile'}
])

export class AppComponent {
  ...
}

As you can see, some new routes are defined inside the ProfileComponent. As shown here:

ProfileComponent.ts:

import {Component, OnInit} from 'angular2/core';
import {RouteConfig,ROUTER_DIRECTIVES, RouteParams, RouterLink, RouterOutlet} from 'angular2/router';
import {ProfileService} from '../../services/profile.service';
import {PROFILE_IMAGES} from '../../constants/constants';
import {WorkoutsComponent} from '../workouts/workouts';
import {FeedComponent} from '../feed/feed';

interface IProfileVM {
  username: string;
  profileUser: Object;
  getProfileData(username:string): void;
}

@Component({
  selector:    'profile',
  templateUrl: './components/profile/profile.html',
  directives:  [RouterOutlet, RouterLink],
  providers:   [ProfileService]
})

@RouteConfig([
  {path: '/nieuwsfeed', component: FeedComponent, as: 'Feed'},
  {path: '/workouts', component: WorkoutsComponent, as: 'Workouts'}
])

export class ProfileComponent implements OnInit, IProfileVM {

  public username:string;
  public profileUser:any;

  constructor(private _profileService:ProfileService,
              private _params:RouteParams) {
    this.username = this._params.get('username');
  }

  ngOnInit() {
    this.getProfileData(this.username);
  }

  getProfileData(username) {
    // Do stuff..
  }
}

So the problem here is, before I introduced some child routes inside the ProfileComponent, everything worked fine. User get's redirected, the username appears in the URL and it was all fine. But since I added these child routes, I got the following error:

"Route generator for 'username' was not included in parameters passed."

Would be great is somebody could help me out!! Thanks in advance!

Try with `this.router.navigate(['../Profile' , {username: username}, 'Feed']);` — Eric Martinez, Dec 26 '15 at 18:58
Yep, when you had `../Profile/Feed, {username: username}` you were passing the parameters to `Feed` not to `Profile`. Glad it worked ;) — Eric Martinez, Dec 26 '15 at 19:10
Been working with Angular v1 for a year now, Angular v2 been a pain in the ass so far ;-). Thanks for your help! — Aico Klein Ovink, Dec 26 '15 at 19:12

score 2 · Answer 1 · answered Dec 30 '15 at 16:41

I think you would be better off moving your nested profile component up a level, in your route definitions. The arbitrary value username has no effect on the profile component routing. Furthermore the value is actually required in the child route, which is where it should be defined.

So parent component routes would lose :username from the profile route and look something like this:

@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/inloggen', component: LoginComponent, as: 'Login'},
  {path: '/profile/...', component: ProfileComponent, as: 'Profile'}
])

Instead your profile component would define the :username route parameter :

@RouteConfig([
  {path: '/:username/nieuwsfeed', component: FeedComponent, as: 'Feed'},
  {path: '/:username/workouts', component: WorkoutsComponent, as: 'Workouts'}
])

This approach seems more intuitive and will lead to less issues navigating between nested route components.

First of all, thanks for your time. Well it sounds good, and is something I tried yesterday and it will work. Also I think in this situation it is more intuitive. And after doing some more research on this, I couldn't find any documentation on getting params from parent components. So can I conclude now that getting params from parent components is just not the way to go, not wishful or even impossible? — Aico Klein Ovink, Dec 30 '15 at 18:16
Oh, I mixed up a more recent question I posted about [getting params from parent controllers](http://stackoverflow.com/questions/34500147/angular-2-getting-routeparams-from-parent-component), but this question is very much related for people interested. — Aico Klein Ovink, Dec 30 '15 at 18:22

Angular 2: Route generator for '...' was not included in parameters passed

1 Answers1

Linked