无法匹配任何路线

Gri*_*rim 18 angular2-routing angular

我的组件显示,但加载页面时收到错误消息.在查看一堆资源后,我似乎无法解决错误消息.

错误

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

main.component.ts位于index.html中,一旦页面加载,它就会显示上面的错误消息.

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 {}
Run Code Online (Sandbox Code Playgroud)

login.component.ts通过main.component.ts路由,并在我点击链接时显示,尽管有错误消息.现在我将它设置为在main.component中弹出其他元素,但希望它是页面上显示的唯一组件.基本上用index.component替换index.html中的main.component,如果可能的话,而不是做一大堆样式来显示: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 {}
Run Code Online (Sandbox Code Playgroud)

Gün*_*uer 17

还要确保在<base href="/">标签的开头有一个标签,<head>或者boostrap(...)按照Angular 2路由器中没有基本href设置的说明提供

提示:@angular/router路由器也被弃用@angular/router-deprecated了,新的路由器将再次发货: - /如果您要切换到@angular/router它,可能最好推迟到新的和希望最终的路由器可用.