CODEWITHSUNDEEP
angularapiurlionic-framework
Milos
Milos

Reputation: 612

Ionic - API status 404

I'm currently learning Ionic Framework and I found tutorial on Youtube which is creating News Application with NewsApi Org data. I followed tutorial step by step and after some time in my browser inspect it shows me this error:

GET http://localhost:8100/$%7BAPI_URL%7D/$%7Burl%7D&apiKey=$%7BAPI_KEY%7D 404

and this

core.js:9110 ERROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:8100/$%7BAPI_URL%7D/$%7Burl%7D&apiKey=$%7BAPI_KEY%7D", ok: false, …}

So thi url: http://localhost:8100/$%7BAPI_URL%7D/$%7Burl%7D&apiKey=$%7BAPI_KEY%7D is not founded.

And here is my code. My environment.ts:

export const environment = {
    production: false,
    apiUrl: 'https://newsapi.org/v2',
    apiKey: '104e3fe11f3d4593bafb75f65f69dc6f'
};

This is my news.service.ts:

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';

const API_URL = environment.apiUrl;
const API_KEY = environment.apiKey;

@Injectable({
    providedIn: 'root'
})
export class NewsService {
    constructor(private http: HttpClient) {}

    getData(url) {
        return this.http.get('${API_URL}/${url}&apiKey=${API_KEY}');
    }
}

In this news.service.ts when I hover over (url) it shows me this message 'url' is declared but its value is never read.ts(6133) and this one Parameter 'url' implicitly has an 'any' type, but a better type may be inferred from usage.ts(7044).And for const API_URL and const API_KEY is same error: is declared but its value is never read.ts(6133. Maybe this is the problem?

Here is my news.page.ts

import { Component, OnInit } from '@angular/core';
import { NewsService } from '../news.service';

@Component({
    selector: 'app-news',
    templateUrl: './news.page.html',
    styleUrls: [ './news.page.scss' ]
})
export class NewsPage implements OnInit {
    constructor(private newsService: NewsService) {}

    ngOnInit() {
        this.newsService.getData('top-headlines?country=us&category=business').subscribe((data) => {
            console.log(data);
        });
    }
}

And my app.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [ AppComponent ],
    entryComponents: [],
    imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule ],
    providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

So why is this error showing anyway when everything is same like in tutorial? Any solutions for this error? Please help! Thank you.

Upvotes: 0

Views: 447

Answers (1)

Nader
Nader

Reputation: 200

Generally the error code 404 means 'Requested URL Not Found'

you are getting this error because you are using Template Literal Expressions 

`${blabla}`

with single mark quotations which is wrong 

'  '

You should use backticks to get the value you want 

` `

So in your code, change the news service form this

news.service.ts :

getData(url) {
    return this.http.get('${API_URL}/${url}&apiKey=${API_KEY}');
}

To this :

 getData(url) {
    return this.http.get(`${API_URL}/${url}&apiKey=${API_KEY}`);
}

Have Fun,

Upvotes: 2

Related Questions