In one of my components I display data that I get from a service I created, which uses http to get a data from external website through api.
Before adding the service, the components worked well (the component only displayed static html). Now, in order to use the service I need to inject the service to the component, so once I inject it to the constructor, it's no longer displays the static html, as well as - and this is really wired - also the router doesn't work. It will not route to this component and in the address bar will show the link of the latest component (latest link that was visiting)
Here's the component:
import { Component, OnInit } from '@angular/core';
import { DataDisplayFromAPI } from '../data-display-from-api.service';
@Component({
selector: 'main-view',
templateUrl: './main-view.component.html',
styleUrls: ['./main-view.component.css']
})
export class MainViewComponent implements OnInit {
objectKeys = Object.keys;
cryptos: any;
constructor (private coinsRateCryptoCompare: DataDisplayFromAPI) {}
title = 'Digital Coin Hub';
ngOnInit () {
this.coinsRateCryptoCompare.getPrices()
.subscribe(res => {
this.cryptos = res;
});
}
}
Now, if I only take out the private parameter from the component private coinsRateCryptoCompare: DataDisplayFromAPI the component shows the static html correct again:
constructor () {}
title = 'Digital Coin Hub';
ngOnInit () {
//this.coinsRateCryptoCompare.getPrices()
//.subscribe(res => {
// this.cryptos = res;
// });
}
}
But then obviously I can't use the http data
What's the problem?
Per the comments, this is the app module and the service.
The service:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
@Injectable()
export class DataDisplayFromAPI {
result:any;
constructor(private _http: HttpClient) {}
getPrices() {
return this._http.get("https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD")
.map(result => this.result = result);
}
}
The app module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // import the HTTP library to make our API calls
import { AppRoutingModule } from './app-routing.module';
import { DigitalCoinHubService } from './digital-coin-hub.service';
import { DataDisplayFromAPI } from './data-display-from-api.service';
import { AppComponent } from './app.component';
import { MainViewComponent } from './main-view/main-view.component';
import { BuySellBitcoinComponent } from './buy-sell/buy-sell.component';
import { DigitalWalletComponent } from './digital-wallet/digital- wallet.component';
import { JobsComponent } from './jobs/jobs.component';
import { DigitalCoinsComponent } from './digital-coins/digital- coins.component';
import { MiningComponent } from './mining/mining.component';
import { StartupsComponent } from './startups/startups.component';
import { EthereumComponent } from './ethereum/ethereum.component';
import { NewsComponent } from './news/news.component';
import { BuyWithDigitalCoinComponent } from './buy-with/buy- with.component';
import { BannerWideComponent } from './banner-wide/banner- wide.component';
@NgModule({
declarations: [
AppComponent,
MainViewComponent,
BuySellBitcoinComponent,
DigitalWalletComponent,
JobsComponent,
DigitalCoinsComponent,
MiningComponent,
StartupsComponent,
EthereumComponent,
NewsComponent,
BuyWithDigitalCoinComponent,
BannerWideComponent
],
imports: [
BrowserModule,
AppRoutingModule,
],
providers: [DigitalCoinHubService, DataDisplayFromAPI],
bootstrap: [AppComponent]
})
export class AppModule { }
I added HttpClientModule to the @NgModule imports and it solved the problem:
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
Thanks for your help. Problem solved.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With