[英]Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files
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 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 : component code 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 : another component 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 :我的.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());
}
}
above are my code files , please check and let me know if I'm doing anything wrong over there.以上是我的代码文件,请检查并让我知道我在那里做错了什么。
Provider name should be name of service and it should be in same case.提供者名称应为服务名称且大小写相同。
Service服务
@Injectable()
export class MyService {
}
So, myService
need to replace with MyService
in my-app component and app.module.因此,需要将 my-app 组件和 app.module 中的
myService
替换为MyService
。
Provider提供者
@Component({ selector: 'my-app',
template: ``,
provider : [myService] })
Providers供应商
providers: [ myService ]
I had the same issue, but on my case i removed "storage" from providers我遇到了同样的问题,但就我而言,我从提供商那里删除了“存储”
@NgModule({
providers: [ storage, ... ]
})
in app.module.ts since @ionic/storage 2.xx we import IonicStorageModule instead of storage在 app.module.ts 自 @ionic/storage 2.xx 我们导入 IonicStorageModule 而不是 storage
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.