Search code examples
angularangular-router

Error: Cannot match any routes. URL Segment: 'homePage'


I want to go to the home page after login button is clicked, but I keep getting the error :

Error: Cannot match any routes. URL Segment: 'homePage'

This are my routes:

{
  path: 'homePage',
  component: HomePageComponent,
  outlet:'homePage'
},
{ 
  path: 'login',
  component:LoginComponent
},  
{ 
  path: '',
  redirectTo: '/login',
  pathMatch: 'full'
} 

And this is the button to be clicked:

<button routerLink="homePage" id="login" md-button>Log in</button>
<router-outlet name="homePage"></router-outlet>

Solution

  • You have to tell the router to route inside your named outlet like this:

    <button [routerLink]="[{ outlets:{ homePage: ['homePage']} }]">
      Edit
    </button>
    

    More about routing with named outlets can be found here.


    As stated by me in the comments of this answer, it sounds like you just want to have a simple unnamed router outlet.

    Make sure you have only one outlet inside your app component's template:

    <router-outlet></router-outlet>
    

    And then remove the outlet property from your route:

    {
        path: 'homePage',
        component: HomePageComponent
    }
    

    And for the router link just use

    <button routerLink="/homePage></button>