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 {}
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 }.
/
, vous devrez peut-être faire en sorte que l'application accède impérativement à un itinéraire initial, comme expliqué dans routeur Angular2 (@ angular/router), comment définir l'itinéraire par défaut?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.
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 ,
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']);
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}
])