Nie można dopasować żadnych tras

Mój komponent jest wyświetlany, ale po załadowaniu strony pojawia się komunikat o błędzie. Nie mogę rozwiązać problemu z komunikatem o błędzie po przejrzeniu wielu zasobów.Nie można dopasować żadnych tras

Błąd

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

main.component.ts jest w index.html i jak najszybciej załadowaniu strony pokazuje powyższy komunikat o błędzie.

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 jest kierowany przez main.component.ts i nie pokazać po kliknięciu na link pomimo komunikatu o błędzie. W tej chwili mam taki styl, aby wyskoczył nad innymi elementami w main.component, ale chciałby, aby był jedynym komponentem wyświetlanym na stronie. Zasadniczo zamień składnik main.component w index.html na login.component, jeśli jest to możliwe, zamiast wykonywać całą garść stylów do wyświetlenia: 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 {}

Źródło

2016-06-08 Grim

pierwszą rzeczą do sprawdzenia jest to, że jeden został określony trasy dla danej trasy. –

Może to być, ponieważ serwer musi być skonfigurowany do HTML5 pushState jak wyjaśniono w Angular 2.0 router not working on reloading the browser

także zapewnić masz <base href="/"> znacznik na początku znacznika <head> lub dostarczone przez boostrap(...), jak objaśniono w Angular 2 router no base href set

Jeśli nie masz trasy dla / może być konieczne, aby aplikacja przejdź do początkowego trasy bezwzględnie jak wyjaśniono w Angular2 router (@angular/router), how to set default route?

Hint: Router @angular/router również jest przestarzała jak @angular/router-deprecated oraz nowy router zostanie wysłany ponownie: -/Jeśli zamierzasz przełączyć się na @angular/router, prawdopodobnie lepiej odłożyć do czasu, aż nowy i mam nadzieję, że końcowy router będzie dostępny.

Źródło

2016-06-08 04:44:24

Będę czekać na nowy router. Czy masz pomysł, kiedy zostanie wydany? – Grim

Nie, ale zakładam, że ma dość wysoki priorytet. Spowodowało to sporo zamieszania. Nowy RC zostanie wkrótce wysłany. Poczekajmy i zobaczmy, czy zostanie dołączony nowy router. –

Czy mógłbyś zamieścić link do dyskusji na nowym routerze, który nie był przestarzały? – roded

plz upewnić <base href="/"> tag w tagu głowy i można korzystać useAsDefault: true attr takiego:

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

Źródło

2016-06-08 04:50:48

Nie ma 'useAsDefault' w' @ kątowym/routerze': -/ –

dlaczego ??? : | Używam z tego attr –

O ile mi wiadomo, nie jest to jeszcze zaimplementowane w '@ kątowym/routerze' i nie będzie, ponieważ zostanie ono ponownie zamienione. Dodanie go nie powoduje błędu, ale nie ma też żadnego efektu. Może używasz '@ kątowego/router-przestarzałe'? –

-2

tylko dodać trasę dla „” wyjątkiem pójdzie.

{ 
    path: '', 
    component: HomeComponent 
}

Źródło

2016-10-10 11:23:58

powinna być ścieżką: '**' – HagaiCo

* powinna również działać tak, jak będzie pasować do dowolnej ścieżki, nie tylko do ścieżki domowej –

i wypróbowałem ją, jej nie działa. Musisz podać "**" – HagaiCo

Kiedy miałem ten problem I zazwyczaj dodać

<base href="./">

do <head> <base href="./"> </head> pliku html.

Następnie podczas importowania plików w NG2

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

To jest preferowanym sposobem na dolnej za tym documentation,

Źródło

2016-10-26 22:08:34 wuno

jeśli składnik dziecko i chcesz nawigować Użyj tędy

Router Servive

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

użycie nawigacja ([]) Metoda ta droga

komponent konstruktor

to jak this._router pochodzi

constructor(private _router: Router) {} 

this._router.navigate(['/home/find']);

Źródło

2017-07-13 22:19:22

Nie można dopasować żadnych tras

Odpowiedz

Powiązane problemy