CODEWITHSUNDEEP
angularangular2-routing
notANerdDev
notANerdDev

Reputation: 1286

Angular Router Weird Behavour - Double Html and Cannot match any routes: ''

Simple App, made with [email protected], AngularFire2

With the below code, the router is throwing this error: XCEPTION: Uncaught (in promise): Error: Cannot match any routes: ''

It works, but its giving an error. So, to remove the erroe i added another route to the RouterModule.forRoot()

{path: '', component: AppComponent}

And then changes the index.html file to remove <app-root> and removed the selector in the AppComponent, and out the router-outlet in the index.html.

With the changes, the error goes away, but i'm left with double instances of AppComponent, which looks like this:

enter image description here

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

Upvotes: 0

Views: 1608

Answers (1)

Philipp Kief
Philipp Kief

Reputation: 8613

With this line in your routings

{ path: '', component: AppComponent }

you tell the router that he should navigate at the ''-path to the AppComponent. But you have your root-router-outlet inside your AppComponent so the router loads the AppComponent into the root-router-outlet which is itself inside this AppComponent.

You see the problem? You should not use the AppComponent anywhere in your router settings because the router loads initially the AppComponent with its root-router-outlet. And then the router loads all of the other routes with its components into this root-router-outlet.

So try to create another component for the empty ''-route and you will be fine.

Upvotes: 3

Related Questions