CODEWITHSUNDEEP
routesangularangular2-routing
Inn0vative1
Inn0vative1

Reputation: 2145

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

I'm having trouble with Angular2 routes. I have a few levels of nesting. Here's my setup: I have the top level of routes for unauthenticated users. Once logged in, they're under the /my routes. On that level, they have a dashboard, which can take them to the /my/projects/ level. Routes under projects require an id. Details of the setup follow. Here's the top level AppComponent:

 @RouteConfig([
  {path: '/home', name:'Home', component: HomeComponent, useAsDefault: true},
  {path: '/login', name: 'Login', component: LoginComponent},
  {path: '/signup', name: 'SignUp', component:SignUpComponent},
  {path: '/my/...', name: 'MyApp', component: MyAppComponent}
])
export class AppComponent {
  constructor(private router: Router) {

  }

Once authenticated, users go to MyAppComponent, which is set up as follows: 

 @RouteConfig([
  {path:'/dashboard', name: 'MyDashboard', component: DashboardComponent, useAsDefault: true},
  {path: '/projects/...', name: 'MyProjects', component: ProjectRootComponent},
])

export class MyAppComponent {

  constructor(private router: Router) {
  }
}

DashboardComponent:

export class DashboardComponent {
  public projects: Array<Project>;
  public loaded: boolean;
  public loadError: boolean;

  constructor(private _service: ProjectService, private router:Router) {
    this.projects = [];
    this.loaded = false;
  }

  ngOnInit() {
    console.log('Dashboard component initialized');
    this._service.getUserProjects()
    .then(projects => {
      this.loaded = true;
      this.projects = projects;
    },
    error => {
      this.loaded = true;
      this.loadError = error;
    });
  }

  selectProject(project: Project) {
    // this.router.navigateByUrl('/my/projects/' + project.id); // Tried this approach as well with the same error
    this.router.parent.navigate(['MyApp', 'MyProjects', {id: project.id}]);
  }

Once on the DashboardComponent, I load a list of projects. When I click on a project, the selectProject(project) method gets called, which is supposed to navigate to that project page. The project id is passed in as a parameter. MyProjects route expects an id, and is set up as follows: 

    @RouteConfig ([
  {path: '/:id', name: 'ProjectHome', component: ProjectHomeComponent, useAsDefault: true},
  {path: '/:id/details', name: 'ProjectDetails', component: ProjectDetailsComponent },
])

export class ProjectRootComponent implements OnInit {

  id: string;
  constructor(private router: Router, private routeParams: RouteParams, private projectService: ProjectService) {
  }

  ngOnInit() {
    this.id = this.routeParams.get('id');

    console.log('Project Component Initialized with id: ' + this.id);
  }

  createProject() {

  }
}

When selectProject(project) on dashboard gets called, I get the error: ORIGINAL EXCEPTION: Route generator for 'id' was not included in parameters passed.

I also tried navigating directly to the project details using both: 

this.router.parent.navigate(['MyApp', 'MyProjects', {id: project.id}, 'ProjectDetails']

and 

 this.router.parent.navigate(['MyApp', 'MyProjects', 'ProjectDetails', {id: project.id}]

Both generate the same error as above.

Note: This is similar to this question asked earlier, but my routes are already set up like is suggested in the answer of that question.

Upvotes: 1

Views: 2099

Answers (1)

Sasxa
Sasxa

Reputation: 41314

I think you have route lookup issue, since you are navigating from child routes. From RouterLink docs (should be same for linkParams):

The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent.

I believe this should work:

this.router.navigate(['/MyApp', 'MyProjects', 'ProjectDetails', {id: project.id}]

or from dashboard:

this.router.navigate(['./MyProjects', 'ProjectDetails', {id: project.id}]

Upvotes: 7

Related Questions