Невозможно сопоставить маршруты

Появляется мой компонент, но при загрузке страницы появляется сообщение об ошибке. Кажется, я не могу решить сообщение об ошибке, посмотрев на кучу ресурсов.

Ошибка

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

main.component.ts находится в index.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 направляется через main.component.ts и показывает, когда я нажимаю ссылку, несмотря на сообщение об ошибке. Прямо сейчас у меня есть стиль, чтобы всплывать над другими элементами в main.component, но хотелось бы, чтобы это был единственный компонент, который отображается на странице. В основном замените main.component в index.html на login.component, если это возможно, вместо того, чтобы делать целую кучу стилей для отображения: 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 {}

Ответ 1

Возможно, это связано с тем, что ваш сервер должен быть настроен для HTML5 pushState, как описано в Angular 2.0 маршрутизаторе, не работающем при перезагрузке браузера

Также убедитесь, что в начале тега <head> есть тег <base href="/"> или предоставлен boostrap(...), как описано в Angular 2 маршрутизатора без базовой настройки href

Если у вас нет маршрута для /, вам может потребоваться сделать переход к первоначальному маршруту, как это объясняется в Angular2 маршрутизаторе (@angular/router), как установить маршрут по умолчанию?

Совет. Маршрутизатор @angular/router также устарел как @angular/router-deprecated, и новый маршрутизатор будет отправлен снова: -/Если вы собираетесь переключиться на @angular/router, вероятно, лучше отложить пока не появится новый и, надеюсь, окончательный маршрутизатор.

Ответ 2

plz убедитесь, что тег <base href="/"> в вашем теге головы, и вы можете использовать useAsDefault: true attr следующим образом:

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

Ответ 3

Когда у меня возникла эта проблема, я обычно добавляю

<base href="./">

в <head> <base href="./"> </head> файла html.

Затем при импорте любых файлов в NG2

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

Это предпочтительный способ сделать базу в документации,

Ответ 4

если у вас есть дочерний компонент, и вы хотите использовать его таким образом

маршрутизатор

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

использовать навигацию ([]) метод таким образом

конструктор компонентов

вот как это._router приходит

constructor( private _router: Router) {}

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

Ответ 5

просто добавьте маршрут для "исключения".

{ 
    path: '', 
    component: HomeComponent 
}