0

I've developed a simple application with Angular 2 RC5. All it does is render a search page and allow you to click on a record to edit it. Simple stuff. I generated the app using the latest version of Angular CLI from its master branch. Since this version doesn't support routing, I had to create my own using the router guide.

Unfortunately, when the initial page loads, I see the following error in my console.

Error: Cannot match any routes: '''

Here's what my app.routes.ts file looks like:

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);

It's then referenced in app.module.ts as follows:

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

I tried adding a path for '' in app.routing.ts, but this causes my page to render the AppComponent twice:

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

In index.html, there is HTML to load the AppComponent:

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

And in app.component.html, I have a router-outlet to load the pages.

<!-- Routed views go here -->
<router-outlet></router-outlet>
3
  • 1
    It is being loaded twice because AppComponent is "bootstraped" in your main.ts file. In your app, it is ok if you searchComponent be the empty one? { path: '', component: SearchComponent } Aug 17, 2016 at 13:45
  • Angular shows you this error, because in fact, you do not have any main route path. Which component do you want to see on page load? Search? If so, you need to add this line { path: '', redirectTo: 'search', pathMatch: 'full' } Aug 17, 2016 at 13:50
  • Felipe: If I use an empty path for SearchComponent, it works, but all my references to the search route fail. I suppose I could update them, but it seems wrong. Kamil: I want to see the AppComponent like I did with Angular 2 RC1. I have <a routerLink="/search" routerLinkActive="active">Search</a> in app.component.html to get to the search component. Aug 17, 2016 at 14:02

3 Answers 3

0

Define your routes like this:

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

Please see the official documentation: https://angular.io/docs/ts/latest/guide/router.html

There are several code-snippets and plunkers.

2
  • This gets rid of the error, but now I'm stuck loading the SearchComponent as the default. Isn't it possible to just load the AppComponent w/o any others? Aug 17, 2016 at 15:01
  • No, if theres a router-outlet in your Component, Angular wants to render something or you will get that error. Maybe you can put that stuff from your AppComponent into another Component and thats the 'default path' ! normally the AppComponent is only the entry to your app and routes everything.. so theres the nav and the router-outlet maybe a footer.. everything else put in other components.
    – slaesh
    Aug 17, 2016 at 15:28
0

Add yellow area in app.module.ts Its work for me! I hope It works!

0

Routes:

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

App component should have only:

<router-outlet></router-outlet>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.