Cannot match any routes in Angular 2.1

Question

I am using Angular 2.1.0 in a Visual Studio 2015 AspNetCore project and having an issue with routing in my lazy loaded modules. The error is as below:

core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'Home/MyList' Error: Cannot match any routes. URL Segment: 'Home/MyList' at ApplyRedirects.noMatchError (http://localhost:31534/libraries/@angular/router/bundles/router.umd.js:769:20) at CatchSubscriber.eval [as selector] (http://localhost:31534/libraries/@angular/router/bundles/router.umd.js:747:33) at CatchSubscriber.error (http://localhost:31534/libraries/rxjs/operator/catch.js:52:31) at MapSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26) at MapSubscriber.Subscriber.error (http://localhost:31534/libraries/rxjs/Subscriber.js:102:18) at MapSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26) at MapSubscriber.Subscriber.error (http://localhost:31534/libraries/rxjs/Subscriber.js:102:18) at MapSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26) at MapSubscriber.Subscriber.error (http://localhost:31534/libraries/rxjs/Subscriber.js:102:18) at LastSubscriber.Subscriber._error (http://localhost:31534/libraries/rxjs/Subscriber.js:128:26)

I have followed the Tour Of Heroes tutorial and adapted it according to the lazy load topic here I am loading a login page first {Home/Login} in the Bootstrapped module called AppModule. On clicking login I want to show the next page MyList, {Home/MyList} which is lazily loaded into a feature module called MyModule.

MyModule is based on the HeroModule from the second link above.

MyList page and related component is the first page/component under MyModule which also has a MyListDetail page/component {Home/MyListDetail}.

I navigate to {Home/MyList} on a button click using this code

let link = ['Home/MyList'];
this.router.navigate(link);

Why are my routes not being found? Here is how I have them setup.

app-routing.module.ts

import { NgModule }             from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'Home/Login', pathMatch: 'full'},
  { path: 'Home/MyList', loadChildren: 'scripts/My.Module#MyModule' }  

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

login-routing.module.ts

import { NgModule }            from '@angular/core';
import { Router, RouterModule }        from '@angular/router';

import { LoginCmpnt }  from './Login';

@NgModule({
  imports: [RouterModule.forChild([
    { path: 'Home/Login', component: LoginCmpnt}
  ])],
  exports: [RouterModule]
})
export class LoginRoutingModule {}

MyList-routing.module.ts

import { NgModule }            from '@angular/core';
import { Routes } from '@angular/router';
import { RouterModule }        from '@angular/router';
import { SharedModule } from './shared.module';
import { MyComponent } from './MyComponent';
import { MyListComponent }  from './MyListComp';
import { MyListDetailComponent }  from './MyListDetailComp';

const routes: Routes = [
  { path: '',
    component: MyComponent,
    children:   [{ path: 'Home/MyList',    component: MyListComponent },
         { path: 'Home/MyListDetail/:id', component: MyListDetailComponent }]
  }];

@NgModule({
    imports: [RouterModule.forChild([routes]), SharedModule ],
    exports: [RouterModule]})

export class MyListRoutingModule {}

In the MyList-routing.module above what should I put for the path against MyComponent? The login method routes to Home/MyList

EDIT

Even this with the slash preceding the path in the login click doesn't work.

let link = ['/Home/MyList'];
this.router.navigate(link);

Yes. That did not work either. My routes are not setup with the preceding forward slash. I tried adding the forward slash in the setup as well when I added it to the login button code — user20358
You must not set up the routes with a leading slash but if you are not navigating to a sibling or child route you must add the leading slash when navigating to a route. — Günter Zöchbauer
I don't say that's the the only possible cause, but it's not obvious from your question where you have the routerLink. Whether the leading slash is required or not depends on where the routerLink is. Therefore it's possible that you don't need it. I haven't used child routes from other modules and therefore don't know other possible causes. — Günter Zöchbauer

Meysam Valiolahi Meysam Valiolahi · Accepted Answer · 2016-10-25T15:37:14

Lazy loaded module most be like this:

 export class default MyModule{

 }

and in app.routing you most use load Child.

Cannot match any routes in Angular 2.1

1 Answers