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 ].

主要内容是编造指数.html,一旦页数显示上述错误信息。

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

Answer 1

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

还确保您有<base href=”/“>/strong> tag at the first of the <head> tag or provided by boosgil(......),详见

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.

Answer 2

如果你有儿童成分,那么你想要利用这种方式。

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

采用这种方法

<>彩虹>

这就是如何做到这一点。

constructor( private _router: Router) {}

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

Answer 3

当我有这个问题时,我通常要补充一点。

<base href="./">

可查阅<代码><head> <base href="> </head> of html file。

之后,在NG2进口任何档案

import { Auth }                 from  ./auth.service ;

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

Answer 4

缩略语缩略语

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

Answer 5

仅增加一条例外的路线。

{ 
    path:   , 
    component: HomeComponent 
}

Error

友情链接