[英]No provider for Http StaticInjectorError
I am trying to pull the data from my api, and populate it in my ionic app, but it is crashing when I enter the page the data should be populated on. 我正在尝试从我的api中提取数据,并在我的离子应用程序中填充它,但是当我进入页面时应该填充数据时它会崩溃。 Below are my two .ts files:
以下是我的两个.ts文件:
import { Component } from '@angular/core';
import { NavController, LoadingController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';
@Component({
selector: 'page-all-patients',
templateUrl: 'all-patients.html',
providers: [RestService]
})
export class AllPatientsPage {
data: any;
loading: any;
constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) {
this.loading = this.loadingCtrl.create({
content: `
<ion-spinner></ion-spinner>`
});
this.getdata();
}
getdata() {
this.loading.present();
this.restService.getJsonData().subscribe(
result => {
this.data=result.data.children;
console.log("Success: " + this.data);
},
err => {
console.error("Error : " + err);
},
() => {
this.loading.dismiss();
console.log('getData completed');
}
);
}
}
and the other file: 和另一个文件:
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
/*
Generated class for the RestServiceProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
@Injectable()
export class RestService {
constructor(public http: Http) {
console.log('Hello RestServiceProvider Provider');
}
getJsonData() {
// return Promise.resolve(this.data);
return this.http.get('url').map(res => res.json());
}
}
I have tried using the HttpModule as well, but it is a fatal error. 我也试过使用HttpModule,但这是一个致命的错误。 The error is as shows:
错误如下所示:
Error: Uncaught (in promise): Error: StaticInjectorError[Http]:
StaticInjectorError[Http]:
NullInjectorError: No provider for Http!
Error: StaticInjectorError[Http]:
StaticInjectorError[Http]:
NullInjectorError: No provider for Http!
at _NullInjector.get (http://lndapp.wpi.edu:8100/build/vendor.js:1276:19)
I am unsure why there is a no provider error, as this is the provider created through ionic framework 我不确定为什么没有提供程序错误,因为这是通过离子框架创建的提供程序
In order to use Http in your app you will need to add the HttpModule to your app.module.ts: 要在您的应用程序中使用Http,您需要将HttpModule添加到app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
]
EDIT 编辑
As mentioned in the comment below, HttpModule
is deprecated
now, use import { HttpClientModule } from '@angular/common/http'
; 如下面的评论所述,现在
deprecated
使用HttpModule
,使用import { HttpClientModule } from '@angular/common/http'
; Make sure HttpClientModule
in your imports:[]
array 确保
imports:[]
数组中的HttpClientModule
For Apps converted from older versions (Angular v2 - v5): HttpModule is now deprecated and you need to replace it with HttpClientModule or else you will get the error too. 对于从旧版本转换的应用程序(Angular v2 - v5):现在不推荐使用HttpModule,您需要将其替换为HttpClientModule,否则您也会收到错误。
import { HttpModule } from '@angular/http';
import { HttpModule } from '@angular/http';
替换import { HttpModule } from '@angular/http';
with the new HttpClientModule import { HttpClientModule} from "@angular/common/http";
import { HttpClientModule} from "@angular/common/http";
Note: Be sure to then update the modules imports[]
array by removing the old HttpModule
and replacing it with the new HttpClientModule
. HttpModule
并将其替换为新的HttpClientModule
来更新模块的imports[]
数组。 import { Http } from '@angular/http';
import { Http } from '@angular/http';
替换import { Http } from '@angular/http';
with the new HttpClient import { HttpClient } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';
的新HttpClient import { HttpClient } from '@angular/common/http';
Update how you handle your Http response. 更新您处理Http响应的方式。 For example - If you have code that looks like this
例如 - 如果您的代码看起来像这样
http.get('people.json').subscribe((res:Response) => this.people = res.json());
The above code example will result in an error. 上面的代码示例将导致错误。 We no longer need to parse the response, because it already comes back as JSON in the config object.
我们不再需要解析响应,因为它已经在配置对象中作为JSON返回。
The subscription callback copies the data fields into the component's config object, which is data-bound in the component template for display.
订阅回调将数据字段复制到组件的配置对象中,该配置对象在组件模板中进行数据绑定以供显示。
For more information please see the - Angular HttpClientModule - Official Documentation 有关更多信息,请参阅 - Angular HttpClientModule - 官方文档
You would need also to import the HttpClientModule
from Angular '@angular/common/http'
into your main AppModule for making HTTP requests. 您还需要将Angular
'@angular/common/http'
的HttpClientModule
导入主AppModule以发出HTTP请求。
app.module.ts app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { ServiceService } from '../../../services/service.service';
@NgModule({
imports: [
HttpClientModule
],
providers: [
ServiceService
]
})
export class AppModule {...}
Add these two file in your app.module.ts
在
app.module.ts
添加这两个文件
import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
after that declare these to in provider.. 之后在提供者中声明这些..
providers: [
Api,
Items,
User,
Camera,
File,
FileTransfer];
This is work for me. 这对我有用。
In ionic 4.6 I use the following technique and it works. 在离子4.6我使用以下技术,它的工作原理。 I am adding this answer so that if anybody is facing similar issues in newer ionic version app, it may help them.
我正在添加这个答案,以便如果有人在新的离子版应用程序中面临类似的问题,它可能会帮助他们。
i) Open app.module.ts and add the following code block to import HttpModule and HttpClientModule i)打开app.module.ts并添加以下代码块以导入HttpModule和HttpClientModule
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
ii) In @NgModule import sections add below lines: ii)在@NgModule导入部分中添加以下行:
HttpModule,
HttpClientModule,
So, in my case @NgModule, looks like this: 所以,在我的情况下@NgModule,看起来像这样:
@NgModule({
declarations: [AppComponent ],
entryComponents: [ ],
imports: [
BrowserModule,
HttpModule,
HttpClientModule,
IonicModule.forRoot(),
AppRoutingModule,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
That's it! 而已!
I am on an angular project that (unfortunately) uses source code inclusion via tsconfig.json
to connect different collections of code. 我
tsconfig.json
一个角度项目(不幸的是)通过tsconfig.json
使用源代码包含来连接不同的代码集合。 I came across a similar StaticInjector
error for a service (eg RestService
in the top example) and I was able to fix it by listing the service dependencies in the deps
array when providing the affected service in the module, for example: 我在服务中遇到类似的
StaticInjector
错误(例如,顶部示例中的RestService
),并且我能够通过在模块中提供受影响的服务时列出deps
数组中的服务依赖项来修复它,例如:
import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { RestService } from 'mylib/src/rest/rest.service';
...
@NgModule({
imports: [
...
HttpModule,
...
],
providers: [
{
provide: RestService,
useClass: RestService,
deps: [HttpClient] /* the injected services in the constructor for RestService */
},
]
...
I was trying to fix the issue for about an hour and just deiced to restart the server. 我试图解决这个问题大约一个小时,只是想重新启动服务器。 Only to see the issue is fixed.
只是看到问题得到解决。
If you make changes to APP module and the issue remains the same, stop the server and try running the serve command again. 如果您对APP模块进行了更改并且问题仍然存在,请停止服务器并再次尝试运行serve命令。
Using ionic 4 with angular 7 使用离子4与角度7
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.