web-dev-qa-db-fra.com

Erreur de routeur Angular2: impossible de faire correspondre les routes: ''

J'ai configuré le routeur Angular2 comme ci-dessous:

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

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

export const appRouterProviders = [
  provideRouter(routes)
];

Plnkr disponible ici

En exécutant le code, j'obtiens l'erreur:

Error: Cannot match any routes: ''

Qu'est-ce que j'oublie ici ?

angularangular-routing
6
runtimeZero

Vous devez spécifier une route pour le cas où l'utilisateur est sur la page d'index de votre application, cette route est le chemin "" et doit ressembler à ceci: { path: '', component: MyComponent }

Si vous voulez que votre page par défaut soit page2, vous devez indiquer votre chemin d'index pour y rediriger comme ceci:

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

L'ordre ici est important, l'itinéraire le plus spécifique doit venir en premier.

4
Diego Fontenelle

Vous devez définir le routeur par défaut pour '' comme:

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

Ou en utilisant la redirection:

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

Voir aussi l'exemple de la documentation angular2

2
yurzui

si je comprends bien, vous voulez utiliser comme page app.ts page par défaut et page2 chargée en cliquant Page2? 

Option1: _ ​​problème à résolution rapide

En résolvant votre erreur de console actuelle, vous pouvez ajouter à votre app.route.ts

import { App} from './app'; 

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

Et le résultat sera

 enter image description here

Mais vous verrez que votre app.ts html se chargera deux fois! ce qui n'est pas un bon moyen de résoudre!

Option 2: 

Comme je l’utilise dans mon projet, je vous ai recommandé de créer une nouvelle page d’accueil comme page par défaut. Ensuite, appelez Page2 dans app.ts

Voici Plnkr http://plnkr.co/edit/vzl9lw

Cela répondrait-il à vos besoins! 

0
ahkeno