无法匹配任何路由答案

【问题标题】：Cannot match any routes无法匹配任何路由
【发布时间】：2016-10-08 04:26:44
【问题描述】：

我的组件出现了，但在页面加载时我收到一条错误消息。看了一堆资源，好像根本解决不了这个错误信息。

错误

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

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

login.component.ts 通过 main.component.ts 路由，并在我单击链接时显示，尽管出现错误消息。现在，我将其样式设置为弹出 main.component 中的其他元素，但希望它成为页面上唯一显示的组件。如果可能的话，基本上用 login.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 {}

【问题讨论】：

首先要检查的是是否有一个为相关路线指定的路线。

标签： angular angular2-routing

【解决方案1】：

这可能是因为您的服务器需要为 HTML5 pushState 进行配置，如Angular 2.0 router not working on reloading the browser 中所述

还要确保您在<head> 标记的开头有一个<base href="/"> 标记或由boostrap(...) 提供，如Angular 2 router no base href set 中所述

如果您没有/ 的路线，您可能需要像Angular2 router (@angular/router), how to set default route? 中解释的那样让应用程序强制导航到初始路线

提示：@angular/router 路由器也被弃用为@angular/router-deprecated，新的路由器将再次发货：-/ 如果您要切换到@angular/router，最好推迟直到新的（希望是最终的）路由器可用为止。

【讨论】：

我会等待新的路由器。你知道它什么时候发布吗？
不，但我认为它具有很高的优先级。这引起了不小的轰动。新的 RC 将很快发货。让我们拭目以待，看看是否会包括新的路由器。
你能链接到关于新的非弃用路由器的讨论吗？
新路由器是 RC.3 的一部分。 angular.io 上的路由器文档已经用于这个新路由器。
angular.io/docs/ts/latest/tutorial/toh-pt5.html 只是想发布一个直接链接....

【解决方案2】：

如果你有子组件并且你想用这种方式导航

路由器服务

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

以这种方式使用 navigate([]) 方法

组件构造函数

this._router 就是这样来的

constructor( private _router: Router) {}

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

【讨论】：

【解决方案3】：

当我遇到这个问题时，我通常会添加

<base href="./">

到 html 文件的<head> <base href="./"> </head>。

然后在NG2中导入任何文件时

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

这是根据documentation 做基础的首选方式，

【讨论】：

【解决方案4】：

请确保 <base href="/"> 在你的 head 标签中，你可以像这样使用 useAsDefault: true attr ：

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

【讨论】：

@angular/router 中没有 useAsDefault :-/
据我所知，这还没有在@angular/router 中实现，也不会因为它将再次被替换。添加它不会导致错误，但它也没有任何效果。也许你正在使用@angular/router-deprecated？
是的，我使用@angular/router-deprecated，路由器和不推荐使用的路由器之间有什么区别？
不同之处在于两者都已弃用；-)。 @angular/router 是一个全新的实现，旨在取代 @angular/router-deprecated，但它也没有完全解决，他们也弃用了它。 @angular/router 有几个问题和缺失的功能。目前最好继续使用@angular/router-deprecated，直到新的新路由器发货并足够稳定。
tnxx 回答 ^-^

【解决方案5】：

只需为 '' 添加一条路线，异常就会消失。

{ 
    path: '', 
    component: HomeComponent 
}

【讨论】：

应该是路径：'**'
* 也应该可以工作，因为它可以匹配任何路径，而不仅仅是主路径
我试过了，它不起作用。你必须指定'**'