Angular 遇到未定义的提供程序!通常这意味着您具有循环依赖关系(可能是由于使用';barrel';index.ts文件引起的)
app.module.ts:模块ts文件Angular 遇到未定义的提供程序!通常这意味着您具有循环依赖关系(可能是由于使用';barrel';index.ts文件引起的),angular,typescript,angular2-services,Angular,Typescript,Angular2 Services,app.module.ts:模块ts文件 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
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.component.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 { }
my.service.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);
}
}
以上是我的代码文件,请检查并让我知道我是否在那里做错了什么。提供商名称应该是服务名称,并且应该是相同的大小写 服务
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());
}
}
因此,我的应用程序组件和app.module中的myService
需要替换为myService
提供商
@Injectable()
export class MyService {
}
提供商
@Component({ selector: 'my-app',
template: ``,
provider : [myService] })
我也有同样的问题,但在我的案例中,我从提供者中删除了“存储”
providers: [ myService ]
在app.module.ts中
自@ionic/storage 2.x.x起
我们导入IonicStorageModule而不是storage我看到至少两个错误,您在应用程序组件和模块中将
MyService
错误地命名为MyService
。另外,如果您在应用程序模块中声明提供者,则不需要在组件中执行此操作。更大的错误是,您的没有选择器>gmappComponent
…谢谢,现在工作正常
providers: [ myService ]
@NgModule({
providers: [ storage, ... ]
})