Нет провайдера для маршрутизатора?

Я получаю эту ошибку:

ИСКЛЮЧЕНИЕ: Ошибка в. /AppComponent классе AppComponent - встроенный шаблон: 0: 0, вызванный: Нет провайдера для маршрутизатора!

Это мой компонент приложения:

import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
    selector: 'my-app',
    template: '<login></login>',

})
export class AppComponent {

}

Я пробовал это в своем модуле приложения:

import { RouterModule } from '@angular/router';

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LoginModule,
    RouterModule
  ],
  bootstrap: [AppComponent, RouterModule]

Но тогда я получаю эту ошибку:

Ошибка: Ошибка: на RouterModule не найдено аннотации

Я нашел несколько примеров, но они используют устаревший маршрутизатор, и у меня нет этой папки. Нужно ли мне это или что? Любое предложение?

ОБНОВИТЬ:

Это мой app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';
import { RouterModule } from '@angular/router';
//import 'rxjs/Rx';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LoginModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component:

import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
    selector: 'my-app',
    template: '<login></login>',

})
export class AppComponent {

}

И тогда у меня есть login.component:

import {Component, EventEmitter, Input, OnChanges} from '@angular/core';
import {Observable} from 'rxjs/Rx';
import { LoginService } from '../services/login.service';
import { Login } from '../model/login'
import {Router} from '@angular/router';
@Component({
    selector: 'login',
    templateUrl: 'login-form',

})
export class LoginComponent {
  // Constructor with injected service
      constructor(
          private loginService: LoginService,
          private router: Router
          ){}

      submitLogin(values){

          // Variable to hold a reference of addComment/updateComment
             let loginOperation:Observable<any>;
             loginOperation = this.loginService.Login(values);
             loginOperation.subscribe(
                function(response) { console.log("Success Response" + response)},
                function(error) { console.log("Error happened" + error)},
                function() {
                   console.log("the subscription is completed");
                     this.router.navigate(['/About']);

                 }
            );

           }
}

Может быть, проблема в этой строке:

 this.router.navigate(['/home']);

Это мой login.module:

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { LoginComponent } from './components/login.component';
import { RouterModule } from '@angular/router';

import { LoginService } from './services/login.service';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
     HttpModule,
    JsonpModule,
    RouterModule  


  ],
  declarations: [
    LoginComponent
  ],

  providers: [
      LoginService
  ],

  exports:[
    LoginComponent
  ]

})
export class LoginModule {
}

Ответ 1

Пожалуйста, используйте этот модуль

RouterModule.forRoot(
  [
    { path: "", component: LoginComponent}
  ]
)

теперь просто замените свой <login></login> на <router-outlet></router-outlet> thats it

Ответ 2

Ответ Babar Bilal, скорее всего, отлично справился с предыдущими релизами Angular 2 alpha/beta. Тем не менее, любой, кто решает эту проблему с Угловым выпуском v4+, может захотеть вместо этого изменить свой ответ (обернуть единственный маршрут в требуемом массиве):

RouterModule.forRoot([{ path: "", component: LoginComponent}])

Ответ 3

Ничего не работает из этого протектора. "forRoot" не помогает.

Сожалею. Отсортировано это. Мне удалось заставить его работать, установив правильные "маршруты" для этой процедуры настройки маршрутизатора "forRoot"

import {RouterModule, Routes} from '@angular/router';    
import {AppComponent} from './app.component';

const appRoutes: Routes = [
  {path: 'UI/part1/Details', component: DetailsComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    DetailsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [DetailsService],
  bootstrap: [AppComponent]
})

Также может быть полезно (потратили некоторое время, чтобы это реализовать). Дополнительная часть маршрута:

const appRoutes: Routes = [
   {path: 'UI/part1/Details', component: DetailsComponent},
   {path: ':project/UI/part1/Details', component: DetailsComponent}
];

Второе правило позволяет открывать URL-адреса, такие как "hostname/test/UI/part1/Details? Id = 666" и "hostname/UI/part1/Details? Id = 666"

Работал в качестве стороннего разработчика с 2012 года, но никогда не застрял в такой сложной вещи, как angular2 (у меня есть 3-летний опыт работы с ExtJS уровня предприятия)

Ответ 4

У меня была ошибка

Нет провайдера для маршрутизатора

Это происходит, когда вы пытаетесь перемещаться в any service.ts

this.router.navigate(['/home']); подобные коды в службах вызывают эту ошибку.

Вы должны обработать навигацию в своих компонентах. например: at login.component

login().subscribe(
        (res) => this.router.navigate(['/home']),
        (error: any) => this.handleError(error));

Раздражающие ошибки происходят, когда мы новичок :)

Ответ 5

У меня был routerLink="." атрибут в одном из моих тегов HTML, который вызвал эту ошибку

Ответ 6

Пожалуйста, сделайте импорт, как показано ниже:

импортировать {Router} из '@angular/Router';

Была допущена ошибка:> импортировать {Router} из '@angular/router';

Ответ 7

Если вы создали отдельный модуль (например, AppRoutingModule) для хранения ваших команд маршрутизации, вы можете получить такую же ошибку:

Error: StaticInjectorError(AppModule)[RouterLinkWithHref -> Router]: 
StaticInjectorError(Platform: core)[RouterLinkWithHref -> Router]: 
NullInjectorError: No provider for Router!

Возможно, вы забыли импортировать его в основной AppModule, как показано здесь:

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule, AppRoutingModule ],
  declarations: [ AppComponent, Page1Component, Page2Component ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Ответ 8

Я также получил эту ошибку при разработке автоматических тестов для компонентов. В этом контексте следует выполнить следующий импорт:

import { RouterTestingModule } from "@angular/router/testing";

const testBedConfiguration = {
  imports: [SharedModule,
    BrowserAnimationsModule,
    RouterTestingModule.withRoutes([]),
  ],