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!

Answer 1

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.