Angular zu Web API 13: Api URL in Angular Frontend eintragen

export const environment = {

    production:false,

    apiUrl: "https://localhost:7073/api/Articles"

};

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

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs';

import { Article } from '../models/article';

import { environment } from 'src/environments/environment';  //*for url route to web api

@Injectable({

  providedIn: 'root'

})

export class ArticlesService {

  //----<  ArticlesService >----

  //*opens webapi and gets data

  private url = "Articles";

  //*inject HttpClient to call api

  constructor(private http: HttpClient) { }  //*inject web-api caller

  //*get array of articles in observable

  public getArticles(): Observable<Article[]> {

    var apiUrl = environment.apiUrl +  "/" + this.url;

    return this.http.get<Article[]>(apiUrl);

  }

  //----</  ArticlesService >----

}

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

 HttpClientModule

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

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

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

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    HttpClientModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

import { Component } from '@angular/core';

import { Article } from './models/article';

import { ArticlesService } from './services/articles.service';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  //--------< export: Component >--------

  //< variables >

  title = 'CodeDocu_Frontend';

  //*add dummy data

  articles: Article[]=[];  //empty start

  //</ variables >

  //*init

  constructor(private articlesService:ArticlesService){}

  //< events >

  //when components starts

  ngOnInit():void{

    //*get articles from api

    this.articlesService.getArticles().subscribe((result: Article[])=>(this.articles = result));

  }

  //</ events >

  //--------< export: Component >--------

}