CODEWITHSUNDEEP
angularangular-routing
runtimeZero
runtimeZero

Reputation: 28076

Angular2 Router Error: Cannot match any routes: ''

I have configured Angular2 Router as below:

import { provideRouter, RouterConfig } from '@angular/router';
import { Page2} from './page2';

const routes: RouterConfig = [
  { path: 'page2', component: Page2 }
];

export const appRouterProviders = [
  provideRouter(routes)
];

Plnkr available here

On Running the code I get the error:

Error: Cannot match any routes: ''

What am I missing here ?

Upvotes: 6

Views: 18339

Answers (3)

ahkeno
ahkeno

Reputation: 111

to be my understanding , you want to use as app.ts page default page and loaded page2 by click Page2?

Option1: quick solve issue

By solving your current console error you can add to your app.route.ts

import { App} from './app'; 

const routes: RouterConfig = [
  { path: '', component: App, useAsDefault: true }
  { path: 'page2', component: Page2 }
];

And Result will be

enter image description here

But you will see your app.ts html will load two time on load! which is not good way to solve!

Option2:

As I use in my project,I recommended you create new home page make as default page .Then call Page2 in app.ts

Here is Plnkr http://plnkr.co/edit/vzl9lw

Would it meet your requirement!

Upvotes: 0

Diego Fontenelle
Diego Fontenelle

Reputation: 166

You need to specify a route for the case where the user is at the index page of your app, that route is the path '' and it should look like this: { path: '', component: MyComponent }

If you want your default page to be page2 you must tell your index path to redirect to it like this:

{ path: 'page2', component: Page2 },
{ path: '', redirectTo: '/page2', pathMatch: 'full' }

The order here is important, the most specific route should come first.

Upvotes: 4

yurzui
yurzui

Reputation: 214047

You should define default router for '' like:

const routes: RouterConfig = [
  { path: '', component: Home }, 
  { path: 'page2', component: Page2 }
];

Or by using redirect:

const routes: RouterConfig = [
  { path: '', redirectTo: '/page2', pathMatch: 'full' }, 
  { path: 'page2', component: Page2 }
];

See also the example from angular2 documentation

Upvotes: 2

Related Questions