non_existing documetation implementing backend api communication

To get used to the library I built a small boiler plate backend and i wanted to see how to make the front end communicate with the api i set up i couldn't find any documentation about doing this i tried setting enviroments folder then a service that call it, but it did not work.

//src/enviroments/enviroment.ts
export const environment = {
    production: true,
    apiUrl: 'https://localhost:44333/api'
  };

//src/app/services/auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private apiUrl = `${environment.apiUrl}/auth`;

  constructor(private http: HttpClient) { }

  login(email: string, password: string): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/login`, { email, password });
  }

  register(name: string, email: string, password: string): Observable<any> {
    return this.http.post<any>(`${this.apiUrl}/register`, { name, email, password });
  }

  logout(): Observable<any> {
    const token = localStorage.getItem('token');
    const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
    return this.http.post<any>(`${this.apiUrl}/logout`, {}, { headers });
  }
}

//src/app/views/pages/login/login.components.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../../services/auth.service';
import { NgStyle } from '@angular/common';
import { IconDirective } from '@coreui/icons-angular';
import { ContainerComponent, RowComponent, ColComponent, CardGroupComponent, TextColorDirective, CardComponent, CardBodyComponent, FormDirective, InputGroupComponent, InputGroupTextDirective, FormControlDirective, ButtonDirective } from '@coreui/angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  standalone: true,
  imports: [
    ContainerComponent,
    RowComponent,
    ColComponent,
    CardGroupComponent,
    TextColorDirective,
    CardComponent,
    CardBodyComponent,
    FormDirective,
    InputGroupComponent,
    InputGroupTextDirective,
    IconDirective,
    FormControlDirective,
    ButtonDirective,
    NgStyle,
    FormsModule
  ]
})
export class LoginComponent {
  username!: string;
  password!: string;

  constructor(private authService: AuthService, private router: Router) { }

  onLogin(): void {
    this.authService.login(this.username, this.password).subscribe(
      response => {
        // Store the token in local storage or session storage
        localStorage.setItem('token', response.token);

        // Redirect to the dashboard
        //this.router.navigate(['/dashboard']); // Update '/dashboard' to your desired route
      },
      error => {
        // Handle login error
        console.error('Login error', error);
      }
    );
  }
}

PS: the link for github discussions is 404 https://github.com/coreui/coreui-free-angular-admin-template/discussions

coreui / coreui-free-angular-admin-template

non_existing documetation implementing backend api communication #270