Cannot match any routes

Question

My component shows up but i get an error message when the page is loaded. I can't seem to solve the error message at all after looking at a bunch of resources.

Error

EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].

main.component.ts is in index.html and as soon as the page loads it shows the above error message.

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

import { LoginComponent } from './login/login.component';

@Component({
    selector: 'main-component',
    template: 
      ' <header>
           <h1>Budget Calculator</h1>
           <a id='login' [routerLink]="['/login']">Login</a>
           <router-outlet></router-outlet>
        </header> '
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@Routes([
    {path: '/login', component: LoginComponent}
])

export class MainComponent {}

login.component.ts is routed through the main.component.ts and does show when I click on the link despite the error message. Right now I have it styled to popup over the other elements in main.component but would like it to be the only component that shows on the page. Basically replace main.component in index.html with login.component if this possible instead of doing a whole bunch of styling to display: none.

import { Component } from '@angular/core';

@Component({
    selector: 'login',
    template: 
        ' <div id="login-pop-up">
              <h6 class="header_title">Login</h6>
              <div class="login-body">
                   Some fancy login stuff goes here
              </div>
          </div> '
})

export class LoginComponent {}

The FIRST thing to check is that one has a Route specified for the route in question. — Joshua Drake, May 15 '17 at 19:20

score 22 · Accepted Answer · edited May 23 '17 at 12:26

22

This might be because your server needs to be configured for HTML5 pushState like explained in Angular 2.0 router not working on reloading the browser

Also ensure you have a <base href="/"> tag at the beginning of the <head> tag or provided by boostrap(...) as explained in Angular 2 router no base href set

If you don't have a route for / you might need to make the app navigate to an initial route imperatively like explained in Angular2 router (@angular/router), how to set default route?

Hint: The @angular/router router also is deprecated as @angular/router-deprecated and a new router will be shipped again :-/ If you are about to switch to @angular/router it's probably better to postpone until the new and hopefully final router is available.

edited May 23 '17 at 12:26

Community

1
1

answered Jun 08 '16 at 04:44

Günter Zöchbauer

623,577
216
2,003
1,567

I will wait for the new router. Do you have an idea on when it will be released? – Grim Jun 08 '16 at 06:09
No, but I assume it has quite high priority. This caused quite some uproar. A new RC will be shipped soon. Let's wait and see if a new router will be included. – Günter Zöchbauer Jun 08 '16 at 06:10
Could you link to the discussion on the new-non-deprecated-router? – roded Jun 22 '16 at 21:32
The new router is part of RC.3. The Router docs at angular.io are already for this new router. – Günter Zöchbauer Jun 23 '16 at 02:53
https://angular.io/docs/ts/latest/tutorial/toh-pt5.html Just wanted to post a direct link.... – Grim Dec 06 '16 at 21:24

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

if you have child component and you want to navigate use this way

router servive

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'enter',
        component: EnterDetailsComponent,
      },
      {
        path: 'find',
        component: FindDetailsComponent,
      }
    ]
  }
];

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

use navigate([]) method this way

component constructor

this is how this._router comes

constructor( private _router: Router) {}

this._router.navigate(['/home/find']);

score 1 · Answer 3 · answered Oct 26 '16 at 22:08

When I have had this problem I typically add

<base href="./">

to the <head> <base href="./"> </head> of html file.

Then when importing any files in NG2

import { Auth }                 from './auth.service';

This is the prefered way to do base per the documentation,

score 0 · Answer 4 · answered Jun 08 '16 at 04:50

0

plz make sure <base href="/"> tag in your head tag and you can use useAsDefault: true attr like this :

@Routes([
    {path: '/login', component: LoginComponent,useAsDefault: true}
])

answered Jun 08 '16 at 04:50

11

There is no `useAsDefault` in `@angular/router` :-/ – Günter Zöchbauer Jun 08 '16 at 04:55
As far as I know this is not yet implemented in `@angular/router` and won't be because it will be replaced again. Adding it doesn't cause an error but it doesn't have any effect either. Maybe you're using `@angular/router-deprecated`? – Günter Zöchbauer Jun 08 '16 at 05:01
yse,i use `@angular/router-deprecated` ,and Whats deference between router and router-deprecated ? – Jun 08 '16 at 05:14
1

The difference is that both are deprecated ;-). `@angular/router` is an entirely new implementation that was intended to replace `@angular/router-deprecated` but it didn't fully work out neither and they deprecated it as well. `@angular/router` has several issues and missing features. Currently it's better to stay with `@angular/router-deprecated` until the new new new router is shipped and stable enough. – Günter Zöchbauer Jun 08 '16 at 05:17
1

tnxx for answer ^-^ – Jun 08 '16 at 05:51

score 0 · Answer 5 · edited Oct 10 '16 at 12:46

0

just add a route for '' the exception will go.

{ 
    path: '', 
    component: HomeComponent 
}

edited Oct 10 '16 at 12:46

Abdulla Nilam

36,589
17
64
85

answered Oct 10 '16 at 11:23

Sancho George

99
1
4

should be path: '**' – HagaiCo Jan 11 '17 at 14:47
* should also work as it will match any path not just the home path – Sancho George Jan 27 '17 at 02:30
i tried it, its not working. You have to specify '**' – HagaiCo Jan 27 '17 at 02:46

Cannot match any routes

5 Answers5

Linked