web-dev-qa-db-fra.com

Ne peut correspondre à aucun itinéraire

Mon composant apparaît, mais je reçois un message d'erreur lorsque la page est chargée. Je n'arrive pas du tout à résoudre le message d'erreur après avoir consulté plusieurs ressources.

Erreur

EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].

main.component.ts est dans index.html et dès le chargement de la page, le message d'erreur ci-dessus s'affiche.

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

import { LoginComponent } from './login/login.component';

@Component({
    selector: 'main-component',
    template: 
      ' <header>
           <h1>Budget Calculator</h1>
           <a id='login' [routerLink]="['/login']">Login</a>
           <router-outlet></router-outlet>
        </header> '
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@Routes([
    {path: '/login', component: LoginComponent}
])

export class MainComponent {}

login.component.ts est routé par le biais de main.component.ts et s'affiche lorsque je clique sur le lien malgré le message d'erreur. En ce moment, je le stylis pour qu'il apparaisse par-dessus les autres éléments de main.component, mais j'aimerais que ce soit le seul composant affiché sur la page. Remplacez fondamentalement main.component dans index.html par login.component si cela est possible au lieu de faire tout un ensemble de styles pour afficher: aucun.

import { Component } from '@angular/core';

@Component({
    selector: 'login',
    template: 
        ' <div id="login-pop-up">
              <h6 class="header_title">Login</h6>
              <div class="login-body">
                   Some fancy login stuff goes here
              </div>
          </div> '
})

export class LoginComponent {}
angularangular2-routing
15
Grim

Assurez-vous également que vous avez une balise <base href="/"> au début de la balise <head> ou fournie par boostrap(...), comme expliqué dans routeur angulaire 2, pas de base href définie }.

Indice: le routeur @angular/router est également obsolète en tant que @angular/router-deprecated et un nouveau routeur sera expédié à nouveau: -/Si vous êtes sur le point de passer à @angular/router, il est probablement préférable de différer jusqu'à ce que le nouveau routeur, enfin final, soit disponible.

16
Günter Zöchbauer

Quand j'ai eu ce problème, j'ajoute généralement 

<base href="./">

au <head> <base href="./"> </head> du fichier html.

Ensuite, lors de l'importation de fichiers dans NG2 

import { Auth }                 from './auth.service';

C’est la méthode préférée pour effectuer la documentation , enter image description here

1
wuno

si vous avez un composant enfant et que vous voulez naviguer, utilisez cette méthode

service de routeur 

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'enter',
        component: EnterDetailsComponent,
      },
      {
        path: 'find',
        component: FindDetailsComponent,
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

utiliser cette méthode de navigation ([])

constructeur de composant

voici comment this._router vient

constructor( private _router: Router) {}

this._router.navigate(['/home/find']);
1
S.D.N Chanaka Fernando

assurez-vous que la balise <base href="/"> est bien dans votre balise head et vous pouvez utiliser useAsDefault: true attr comme ceci:

@Routes([
    {path: '/login', component: LoginComponent,useAsDefault: true}
])
0
Alireza Valizade