Error: Cannot match any routes: '' in Angular 2 RC5 with Angular CLI

Question

我用 Angular 2 RC5 开发了一个简单的应用程序。它所做的只是呈现一个搜索页面并允许您单击记录以对其进行编辑。简单的东西。我使用来自其 master 分支的最新版本 Angular CLI 生成了该应用程序。由于此版本不支持路由，我不得不使用 router guide.

创建自己的路由

不幸的是，当初始页面加载时，我在控制台中看到以下错误。

Error: Cannot match any routes: '''

这是我的 app.routes.ts 文件的样子：

import { Routes, RouterModule } from '@angular/router';
import { SearchComponent } from "./search/index";
import { EditComponent } from "./edit/index";
import { AppComponent } from "./app.component";

const appRoutes: Routes = [
    { path: 'search', component: SearchComponent },
    { path: 'edit/:id', component: EditComponent }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

然后在 app.module.ts 中引用如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { routing, appRoutingProviders } from './app.routing';

import { AppComponent } from './app.component';
import { SearchComponent } from './search/search.component';
import { EditComponent } from './edit/edit.component';

@NgModule({
  declarations: [
    AppComponent,
    SearchComponent,
    EditComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [appRoutingProviders],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

我尝试在 app.routing.ts 中为“”添加路径，但这会导致我的页面呈现 AppComponent 两次：

const appRoutes: Routes = [
  { path: 'search', component: SearchComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: '', component: AppComponent }
];

在index.html中，有HTML加载AppComponent:

<app-root>Loading...</app-root>

在 app.component.html 中，我有一个用于加载页面的路由器插座。

<!-- Routed views go here -->
<router-outlet></router-outlet>

Answer 1

像这样定义你的路线：

const appRoutes: Routes = [
  { path: 'search', component: SearchComponent },
  { path: 'edit/:id', component: EditComponent },
  { path: '', redirectTo: '/search', pathMatch: 'full' }
];

请看官方文档：https://angular.io/docs/ts/latest/guide/router.html

有几个代码片段和插件。

Answer 2

在 app.module.ts 中添加黄色区域它对我有用！我希望它有效！

Answer 3

路线：

const routes: Routes = [
  { path: '', component: HeaderComponent },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];

App 组件应该只有：

<router-outlet></router-outlet>

Error: Cannot match any routes: '' in Angular 2 RC5 with Angular CLI

Error: Cannot match any routes: '' in Angular 2 RC5 with Angular CLI

angular

angular2-routing

angular-cli