HTTP GET Request using ionic 3? - ionic-framework

Question

I am new to ionic i am trying to fetch result using REST API , with GET Method but not successfull , I am stuck into this problem from the last two days
can anyone please help me.
My code is here
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Slides } from 'ionic-angular';
import { ViewChild } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Http } from '../../../node_modules/#angular/http';
import { HttpHeaders } from '#angular/common/http';
import { Headers } from '#angular/http';
import { RequestOptions } from '#angular/http';
import 'rxjs/add/operator/map'
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
headers.append('Accept', 'application/json');
headers.append('Authorization', 'Basic Ok9AYWNsZUAxMjM=');
headers.append('AuthUser', '78909890');
headers.append('SecretKey','a8658f0d67890459');
let options = new RequestOptions({ headers: headers });
this.http.get('https:I/v01/?=AttachmentFiles')
.map(res => res.json())
.subscribe(data =>
{
this.posts = data["value"];
console.log('GET RESPONSE',this.posts +"");
});
i am getting error
core.js:1449 ERROR Error: Uncaught (in promise): Error:
StaticInjectorError(AppModule)[ommunicationPage -> Http]:
StaticInjectorError(Platform: core)[ommunicationPage -> Http]:
NullInjectorError: No provider for Http! Error: StaticInjectorError(AppModule)[mmunicationPage -> Http]:
StaticInjectorError(Platform: core)[mmunicationPage -> Http]:
My App Module.ts
import { NgModule, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpClientModule } from '#angular/common/http';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { AppDashboardPage } from '../pages/app-dashboard/app-dashboard';
import { WorkHistoryPage } from '../pages/work-history/work-history';
import { ElBalancePage } from '../pages/el-balance/el-balance';
import { LearningTabPage } from '../pages/learning-tab/learning-tab';
import { MandatoryTrainigsPage } from '../pages/mandatory-trainigs/mandatory-trainigs';
import { PastDueTrainingsPage } from '../pages/past-due-trainings/past-due-trainings';
import { ActiveTrainigsPage } from '../pages/active-trainigs/active-trainigs';
import { ChartsModule } from 'ng2-charts';
import { TabsPage } from '../pages/tabs/tabs';
import { BasicDetailsPage } from '../pages/basic-details/basic-details';
import { PersonalDetailsPage } from '../pages/personal-details/personal-details';
import { HomePage } from '../pages/home/home';
import { MangerViewPage } from '../pages/manger-view/manger-view';
import { Navbar } from 'ionic-angular';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { Logger } from 'angular2-logger/core';
import { RestApiProvider } from '../providers/rest-api/rest-api';
import { InAppBrowser } from '#ionic-native/in-app-browser';
import {HelpmetModalPage} from '../pages/helpmet-modal/helpmet-modal';
import {HelpMatePage} from '../pages/help-mate/help-mate';
import {SoftLoanPage} from '../pages/soft-loan/soft-loan';
#NgModule({
declarations: [
MyApp,
DashboardPage,
LoginPage,
AppDashboardPage,
WorkHistoryPage,
ElBalancePage,
LearningTabPage,
MandatoryTrainigsPage,
PastDueTrainingsPage,
ActiveTrainigsPage,
TabsPage,
BasicDetailsPage,
PersonalDetailsPage
],
imports: [
BrowserModule,
HttpClientModule,
ChartsModule,
FormsModule,
SuperTabsModule,
IonicModule.forRoot(MyApp, { tabsPlacement: 'top', }),
SuperTabsModule.forRoot()
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
LoginPage,
DashboardPage,
AppDashboardPage,
WorkHistoryPage,
ElBalancePage,
LearningTabPage,
MandatoryTrainigsPage,
PastDueTrainingsPage,
CorpCommunicationPage
],
providers: [
StatusBar,
SplashScreen,
Logger,
RestApiProvider,
InAppBrowser,
Deeplinks,
{ provide: ErrorHandler, useClass: IonicErrorHandler }
]
})
export class AppModule { }
Please Help me
Thanks in Advance.

Answer 1

You should import HttpModule in app.module.ts like
import { HttpModule } from '#angular/http';
...
imports: [
HttpModule,
],

Answer 2

If you are using HttpClient then why you have also imported Http from #angular/http?
import { HttpClient } from '#angular/common/http';
constructor(public http: HttpClient) {}
Use this HttpClient for get request. It will work.

Answer 3

I think you don't have to import so many things in your app,module.ts.
Example Http Get:
import { Http, Headers } from '#angular/http';
Don't import HttpClient and HttpHeaders
getSomething(){
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Authorization', this.someToken);
headers.append('Something', this.somethingElse);
this.http.get('URL', {headers: headers})
.map(res => res.json())
.subscribe(data => {
resolve(data);
}, (err) => {
reject(err);
});
});
}
And you call it like this:
this.someServiceWithMethod.getSomething().then((data) => {
this.something = data;
}, (err) => {
console.log("something went wrong");
});

Answer 4

import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
export class YourComponent {
constructor(private http: HttpClient) {}
YourMethod(name) {
const params = new HttpParams().set('name',name);
const httpOptions = {
headers: new HttpHeaders(
{ 'Content-Type': 'application/json' },
)
};
this.http.get(GET_API_URL , { params: params }, httpOptions).subscribe(res => {
console.log(JSON.stringify(res, null, 2));
});
}
}
Best practise : Define api calls in a separate Service Class.