Cannot match any routes

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

标签： angular angular2-routing

5条回答

家丑人穷心不美

2楼-- · 2019-02-16 08:04

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

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

3楼-- · 2019-02-16 08:06

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,

0人赞添加讨论(0) 举报

时光不老，我们不散

4楼-- · 2019-02-16 08:12

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.

0人赞添加讨论(0) 举报

Cannot match any routes

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间