Question

我收到此错误：

EXCEPTION：./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 {

}

我在我的app模块中尝试了这个：

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

Answer 1

请使用此模块

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

现在只需将<login></login>替换为<router-outlet></router-outlet>即可

Answer 2

Babar Bilal的回答可能对早期的Angular 2 alpha / beta版本有效。但是，任何使用Angular release v4 +解决此问题的人都可能希望尝试对他的答案进行以下更改（将所需的数据包装在所需的数组中）：

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

Answer 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}
];

第二条规则允许打开“hostname / test / UI / part1 / Details？id = 666”和“hostname / UI / part1 / Details？id = 666”< / em>的

自2012年以来一直担任前端开发人员，但从未遇到像angular2这样过于复杂的事情（我有3年的企业级ExtJS经验）

Answer 4

我有错误

没有路由器提供商

当您尝试在any service.ts

中导航时会发生这种情况服务中的

this.router.navigate(['/home']);代码会导致该错误。

您应该处理组件中的导航。例如：at login.component

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

当我们是新手时会发生烦人的错误：）

Answer 5

我的某个HTML代码中有routerLink="."属性导致该错误

Answer 6

在为组件开发自动测试时，我也收到此错误。在这种情况下，应进行以下导入：

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

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

Answer 7

请按如下所示进行导入：

从“ @ angular / Router”导入{Router}；

发生的错误是->从'@ angular / router'导入{Router};

Answer 8

如果您创建了一个单独的模块（例如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 { }

没有Router的提供商？

8 个答案: