遇到未定義的提供者！通常，這意味着你有一個循環依賴（可能通過使用 '桶' 引起index.ts文件

Question

Browser Error : 

    Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files. 
    Evaluating http://localhost:3000/app/boot.js 
    Loading app/boot 
    at syntaxError (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14410:40) 
    at Array.forEach (native) 
    at CompileMetadataResolver._getProvidersMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14395:19) 
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14051:50) 
    at JitCompiler._loadModules (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25088:64) 
    at JitCompiler._compileModuleAndComponents (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25047:52) 
    at JitCompiler.compileModuleAsync (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:25009:21) 
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4793:25) 
    at PlatformRef_.bootstrapModule (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4779:21) 
(anonymous) @ gmapp:18 
ZoneDelegate.invoke @ zone.js:391 
Zone.run @ zone.js:141 
(anonymous) @ zone.js:818 
ZoneDelegate.invokeTask @ zone.js:424 
Zone.runTask @ zone.js:191 
drainMicroTaskQueue @ zone.js:584 

app.module.ts：模塊TS文件

import { NgModule }  from '@angular/core'; 
    import { BrowserModule } from '@angular/platform-browser'; 
    import { HttpModule } from '@angular/http'; 
    import { RouterModule, Routes } from '@angular/router'; 
    import { myService } from 'app/httpServices/my.service'; 
    import { AppComponent } from './app.component'; 
    import { gmappComponent } from './gmappComponent/gmapp.component'; 


    const appRoutes: Routes = [ 
     { path: 'gmapp', component: gmappComponent } 

    ]; 

@NgModule({ 
    imports:  [ BrowserModule,RouterModule.forRoot(appRoutes),HttpModule ], 
    providers: [ myService ], 
    declarations: [ AppComponent , gmappComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component .TS：分量代碼

import { Component } from '@angular/core'; 
import { myService } from 'app/httpServices/my.service'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
      <h1>Angular2</h1><p>Hello {{test}} {{name}}</p> 
      <ul class="nav nav-tabs nav-justified"> 
       <li role="presentation" class="active"><a routerLink="/mapp" routerLinkActive="active">mapp</a></li> 
       <li role="presentation"><a href="#">gap</a></li> 
       <li role="presentation"><a href="#">pst</a></li> 
      </ul> 

      <router-outlet></router-outlet> 
    `, 
    provider : [myService] 
}) 

export class AppComponent { 
    test: string; 
    name: string; 

    constructor() { 
    this.test = "Prav"; 
    this.name = "S"; 
    } 
} 

gmapp.component.ts：另一個組件

個

import { Component } from '@angular/core'; 
import { MyService } from 'app/httpServices/my.service'; 

@Component({ 
    templateUrl : './gmapp.html', 
    provider: [MyService] 
}) 


export class gmappComponent { 
    servercount : number; 
    name : string ; 
    MyArrayType : any[]; 
    profile = {}; 

    constructor(private myService: MyService) { 

    this.servercount = 30; 

    } 

    loadUser() { 
    this.myService.getUser().subscribe(data => this.profile = data); 
    } 
} 

my.service.ts：以上

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import 'node_modules/rxjs/add/operator/map'; 

@Injectable() 
export class MyService { 
    constructor (
    private http: Http 
) {} 

    getUser() { 
    return this.http.get(`https://abcd.com/abcd`) 
    .map((res:Response) => res.json()); 
    } 

} 

是我的代碼文件，請讓我知道如果我做錯什麼了那裏。

Answer 1

提供者名稱應該是服務的名稱，它應該是相同的情況。

服務

@Injectable() 
export class MyService { 

} 

所以，myService需要在我的應用程序內構件和app.module與MyService更換。

提供商

@Component({ selector: 'my-app', 
      template: ``, 
      provider : [myService] }) 

提供商

providers: [ myService ]