没有路由器供应商? [英] No provider for Router?

问题描述

我收到此错误:

例外:./AppComponent 类 AppComponent 中的错误 - 内联template:0:0 原因:没有路由器提供程序！

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0 caused by: No provider for Router!

这是我的应用组件:

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

})
export class AppComponent {

}

我在我的应用模块中尝试了这个:

I tried this in my app module:

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

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

但后来我得到这个错误:

But then i get this error:

错误:错误:在 RouterModule 上找不到指令注释

Error: Error: No Directive annotation found on RouterModule

我找到了一些示例，但它们使用路由器已弃用，而且我没有那个文件夹.我需要那个还是什么?有什么建议吗?

I found some examples but they use router-deprecated, and i dont have that folder. Do i need that or what? Any suggstion?

更新:

这是我的 app.module:

This is my 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 { }

应用程序组件:

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

})
export class AppComponent {

}

然后我有 login.component:

And then i have 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']);

这是我的登录模块:

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

推荐答案

请使用此模块

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

现在只需将您的 替换为 就是这样

now just replace your <login></login> with <router-outlet></router-outlet> thats it

这篇关于没有路由器供应商?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！