Иони c - API статус 404

Question

В настоящее время я изучаю Ioni c Framework, и я нашел учебник на Youtube, который создает приложение новостей с NewsApi Org данными. Я шаг за шагом следовал инструкциям и через некоторое время в своем браузере проверяю, появляется ли эта ошибка:

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

и это

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, …}

Итак, этот URL: http://localhost:8100/$%7BAPI_URL%7D/$%7Burl%7D&apiKey=$%7BAPI_KEY%7D не основан.

А вот и мой код. Мой environment.ts:

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

Это мой 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}');
    }
}

В этом news.service.ts при наведении курсора на (url) он показывает мне это сообщение 'url' is declared but its value is never read.ts(6133) и этот Parameter 'url' implicitly has an 'any' type, but a better type may be inferred from usage.ts(7044). И для const API_URL и const API_KEY такая же ошибка: is declared but its value is never read.ts(6133. Может быть, это проблема?

Вот мой 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);
        });
    }
}

И мой 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 {}

Так почему эта ошибка все равно отображается, когда все так же, как в учебнике? Какие-либо решения для этой ошибки? Пожалуйста помоги! Спасибо.

Answer 1

Обычно код ошибки 404 означает «Запрошенный URL-адрес не найден»

Вы получаете эту ошибку, потому что используете шаблонные буквенные выражения

`${blabla}` 

с одинарными кавычками, что неверно

'  '

Вы должны использовать обратные кавычки, чтобы получить желаемое значение

` `

Таким образом, в своем коде измените форму службы новостей следующим образом:

news.service .ts :

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

На это:

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

Веселись,