Angular 2 Cannot match Route error

Question

I am getting angular route error

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'null' Error: Cannot match any routes. URL Segment: 'null'at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError

Below is my route object:

export const ROUTES: Routes = [
  { path: '', component: TrendsComponent},
  { path: 'trends', component: TrendsComponent }
];

I am using @angular/router 4.0.0

Alexander Staroselsky Alexander Staroselsky · Accepted Answer · 2017-08-25T01:16:56

Try setting up your routes in the follow way, utilizing a redirectTo to route the user to path "/trends" on startup.

Make sure you are importing RouterModule into your NgModule. For the root module or similar you'd use RouterModule.forRoot(ROUTES) and for feature modules you'd use RouterModule.forChild(ROUTES). Be sure to include <router-outlet></router-outlet> in both the root and in any feature modules.

const ROUTES: Routes = [
  { path: 'trends', component: TrendsComponent },
  { path: '', redirectTo: '/trends', pathMatch: 'full' }
];

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello World</h2>
      <p>Redirect to path /trends component is occurring on startup</p>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class App {}

@NgModule({
  imports: [ BrowserModule, RouterModule.forRoot(ROUTES) ],
  declarations: [ App, TrendsComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

Here is a plunker demonstrating the functionality.

Updated: plunker has been updated to show declaring and importing child routes and modules (non lazy loading).

Hopefully that helps.

Angular 2 Cannot match Route error

1 Answers