Angular Router奇怪的行为 - 双Html并且无法匹配任何路线：＆＃39;＆＃39;

Question

Simple App，使用Angular-cli@1.0.0-beta.18制作，AngularFire2

使用以下代码，路由器抛出此错误： XCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''

它有效，但它给出了一个错误。因此，为了删除错误，我添加了另一条到RouterModule.forRoot()

的路线

{path: '', component: AppComponent}

然后更改index.html文件以删除<app-root>并删除AppComponent中的选择器，并删除index.html中的router-outlet。

随着更改，错误消失了，但我留下了AppComponent的双重实例，如下所示：

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>

app.component.ts

@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(){}

}

app.module.html

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

Answer 1

在您的路线中使用此行

''

你告诉路由器他应该导航到AppComponent - router-outlet的路径。但是你的AppComponent内有你的根router-outlet，所以路由器将AppComponent加载到根AppComponent中，它本身位于AppComponent内。

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

因此，尝试为空{{1}} - 路线创建另一个组件，你会没事的。