Nicht alle Routen

Meine Komponente zeigt sich, aber ich bekomme eine Fehlermeldung, wenn die Seite geladen wird. Ich kann nicht scheinen, um zu lösen die Fehlermeldung überhaupt nach einem Blick auf ein Bündel von Ressourcen.

Fehler

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

main.Komponente.ts ist in index.html und sobald die Seite geladen wird, zeigt es die oben genannten Fehlermeldung.

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.Komponente.ts weitergeleitet wird über den main.Komponente.ts und nicht zeigen, wenn ich auf den link Klick trotz der Fehlermeldung. Jetzt habe ich es gestylt popup über die anderen Elemente in main.Komponente, sondern möchte, dass es die einzige Komponente ist, zeigt auf der Seite. Im Grunde ersetzen Sie die Haupt -.Komponente in index.html mit der Anmeldung.Komponente, wenn das mögliche tun, anstatt eine ganze Reihe von styling auf display: 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 {}

InformationsquelleAutor Grim | 2016-06-08