Angular 角度路由器行为-双重Html，无法匹配任何路由：''；

简单的应用程序，有角度-cli@1.0.0-beta.18，AngularFire2

使用以下代码，路由器将抛出此错误：

异常：未捕获（承诺中）：错误：无法匹配任何路由：“”

它是有效的，但它给出了一个错误。因此，为了消除错误，我在

RouterModule.forRoot（）中添加了另一条路由

{路径：“”，组件：AppComponent}

然后更改index.html文件以删除

app.component.html

<div>
    <md-toolbar color="primary">
        <span>
            <md-icon class="icon-20">work</md-icon>
            MyPA
        </span>
        <button md-icon-button [md-menu-trigger-for]="menu">
            <md-icon>more_vert</md-icon>
        </button>
    </md-toolbar>
    <md-menu x-position="before" #menu="mdMenu">
        <a routerLinkActive="active" routerLink="/accounts" md-menu-item>Accounts</a>
    </md-menu>
    <pre>{{accounts | async | json}}</pre>
    <router-outlet></router-outlet>
</div>

这条线在你的路线上

您告诉路由器他应该在
'
-路径导航到
AppComponent
。但是在
AppComponent
中有根
路由器出口
，因此路由器将AppComponent加载到根
路由器出口
中，而根
路由器出口本身就在这个
AppComponent
中

你看到问题了吗？您不应该在路由器设置中的任何位置使用AppComponent，因为路由器最初加载的
AppComponent
带有根-
路由器出口
。然后路由器将所有其他路由及其组件加载到此根-
路由器出口

因此，尝试为空的
'
-路线创建另一个组件，您会没事的。
在您的路线中有这一行

您告诉路由器他应该在
'
-路径导航到
AppComponent
。但是在
AppComponent
中有根
路由器出口
，因此路由器将AppComponent加载到根
路由器出口
中，而根
路由器出口本身就在这个
AppComponent
中

你看到问题了吗？您不应该在路由器设置中的任何位置使用AppComponent，因为路由器最初加载的
AppComponent
带有根-
路由器出口
。然后路由器将所有其他路由及其组件加载到此根-
路由器出口

因此，请尝试为空的
'
-路由创建另一个组件，您会没事的。
您可以添加routing.ts文件吗，因为您在这方面有问题？@ParthChokshi我没有单独的文件。应用程序还太小。所以，所有的路由都在AppModule本身中。哦，我的糟糕。我没有正确地看到你的app.module。你能添加你的routing.ts文件吗，因为你在这方面有问题吗？@ParthChokshi我没有单独的文件。应用程序还太小。所以，所有的路由都在AppModule本身中。哦，我的糟糕。我没有正确地看到你的app.module。为什么我不能忽略该路径？它不应该默认为引导组件吗？路由器在引导组件内部初始化，引导组件是我们的
AppComponent
。路由器初始化后，它会搜索可用的第一个
路由器出口
——这是我们的
AppComponent
的出口。现在，路由器想知道他应该在我们的
AppComponent
的
路由器出口中加载哪个组件。因此，这必须是
AppComponent
之外的另一个组件。
AppComponent
无法将自身加载到自己的
路由器出口中。为什么我不能忽略该路由？它不应该默认为引导组件吗？路由器在引导组件内部初始化，引导组件是我们的
AppComponent
。路由器初始化后，它会搜索可用的第一个
路由器出口
——这是我们的
AppComponent
的出口。现在，路由器想知道他应该在我们的
AppComponent
的
路由器出口中加载哪个组件。因此，这必须是
AppComponent
之外的另一个组件。
AppComponent
无法将自身加载到自己的
路由器出口中。
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit{

accounts: FirebaseListObservable<Account[]>;

constructor(
    private Accounts: Accounts
){
  this.accounts = Accounts.getAll();
}

ngOnInit(){}

@NgModule({
  declarations: [
    AppComponent,
    AccountsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: 'accounts', component: AccountsComponent}
    ]),
    MaterialModule.forRoot(),
    AngularFireModule.initializeApp(myFirebaseConfig, myFirebaseAuthConfig)
  ],
  providers: [
      Accounts
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

{ path: '', component: AppComponent }