CODEWITHSUNDEEP
angularangular2-routing
Abraham Gnanasingh
Abraham Gnanasingh

Reputation: 907

Can't navigate with Nested Routes - angular2.rc3

I can't navigate by configuring nested routes with the new router. I am getting error as "Error: Uncaught (in promise): Error: Cannot match any routes: 'todos'". I don't know where I've gone wrong. Can anyone help me to solve this issue? Thanks in advance.

Upvotes: 0

Views: 827

Answers (2)

Gabi
Gabi

Reputation: 590

1) add in you main starting app something like: 

<...>
import { PLATFORM_DIRECTIVES } from '@angular/core';
<...>
bootstrap( <...>
    , [APP_ROUTER_PROVIDERS , <...> ]);
<...>

2) then define your apps routing and export them in a var, APP_ROUTER_PROVIDERS , like (first you need to import all necessary components - and see that you have a few ways to define these):

import { provideRouter, RouterConfig } from '@angular/router';
<...>
export const routes: RouterConfig = [
   { path: 'comp1', component: Component1 },
   ...Component1Routes, //if you want to have this in a separate file
   {
       path: 'comp2',
       component: Component2,
       'children': [
           { path: '', component: comp2 },
           { path: 'new', component: comp2new },
           { path: 'edit/:id', component: comp2edit }
        ]
    }
];
<...>
export const APP_ROUTER_PROVIDERS = [
    provideRouter(
        routes
        //, { enableTracing: true }
    )
];
...

3) you will also need to add the router directive in your top component: 

import { ROUTER_DIRECTIVES } from '@angular/router';

4) in any child components you should include Router & ActivatedRoute :

import { Router, ActivatedRoute } from '@angular/router';

5) in the view you can add links using :

<a [routerLink]="['comp1']"> Comp 1</a>

you can find a running example here: http://embed.plnkr.co/ER0tf8fpGHZiuVWB7Q07/ or http://plnkr.co/edit/Zd0qmavTzedtimImAgfQ?p=preview

I hope it helps

Upvotes: 1

Reginaldo Camargo Ribeiro
Reginaldo Camargo Ribeiro

Reputation: 768

You need to put something like this:

//our root app component
import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES, RouterConfig, Router} from '@angular/router';

import {LoginComponent} from './login';
import {TodosComponent} from './todos.ts';

export const AppRoutes: RouterConfig = [
  {
    path: "login", 
    component: LoginComponent,
    name:"Login"
  },
  {
    path: 'todos',
    component: TodosComponent,
    name:"Todos"
  }
  ,
  {
    path: "", 
    redirectTo: "/todos"
  },
]

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `
    <a [routerLink]="['Login']">Login</a>
    <a [routerLink]="['Todos']">Todos</a>
    <router-outlet></router-outlet>
  `,
})

Upvotes: 0

Related Questions