遇到未定义的提供商！通常这意味着您有一个循环依赖（可能是由于使用＆＃39;桶＆＃39; 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：module ts file

    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需要替换my-app组件和app.module中的MyService。

<强>提供商

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

<强>提供商

providers: [ myService ]

Answer 2

我遇到了同样的问题，但就我而言，我从提供商那里删除了“存储”

@NgModule({
providers: [ storage, ... ]
})

在app.module.ts中 由于@ ionic / storage 2.x.x 我们导入IonicStorageModule而不是存储