wake-up-neo.net

Kann keine Routen zuordnen

Meine Komponente wird angezeigt, aber beim Laden der Seite wird eine Fehlermeldung angezeigt. Ich kann die Fehlermeldung überhaupt nicht lösen, nachdem ich einige Ressourcen angeschaut habe.

Error

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

main.component.ts ist in index.html und sobald die Seite geladen wird, wird die obige Fehlermeldung angezeigt.

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 wird durch main.component.ts geroutet und wird angezeigt, wenn ich trotz der Fehlermeldung auf den Link klicke. Im Moment habe ich es so gestaltet, dass es über den anderen Elementen in main.component angezeigt wird, aber ich möchte, dass es die einzige Komponente ist, die auf der Seite angezeigt wird. Ersetzen Sie main.component grundsätzlich in index.html durch login.component, wenn dies möglich ist, anstatt eine ganze Reihe von Formatierungen für die Anzeige vorzunehmen: none.

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

Stellen Sie außerdem sicher, dass Sie ein <base href="/"> -Tag am Anfang des <head>-Tags haben oder von boostrap(...) bereitgestellt werden, wie in Angular 2-Router beschrieben, keine Basis-Href gesetzt .

Hint: Der @angular/router-Router ist ebenfalls als @angular/router-deprecated veraltet, und ein neuer Router wird erneut versandt: -/Wenn Sie auf @angular/router umsteigen, ist es wahrscheinlich besser, den neuen Router zu verschieben, bis der neue und hoffentlich endgültige Router verfügbar ist.

16
Günter Zöchbauer

Wenn ich dieses Problem hatte, füge ich normalerweise hinzu 

<base href="./">

in den <head> <base href="./"> </head> der HTML-Datei.

Dann beim Importieren von Dateien in NG2 

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

Dies ist die bevorzugte Methode, um anhand der Dokumentation , enter image description here

1
wuno

wenn Sie eine untergeordnete Komponente haben und navigieren möchten, verwenden Sie diesen Weg

Router-Dienst 

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 { }

verwenden Sie die navigate ([]) -Methode auf diese Weise

Komponentenkonstruktor

so kommt dieser.Router

constructor( private _router: Router) {}

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

stellen Sie sicher, dass das Tag <base href="/"> in Ihrem Kopf-Tag vorhanden ist, und Sie können useAsDefault: true attr wie folgt verwenden:

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