0

Angular version: Angular: 12.2.9

I'm learning Node + Angular. I have an endpoint that works fine (tested with postman), but when I want to call it from the Angular project, the request is made to http://localhost:4200/localhost:8010/api/photos when it should be to http://localhost:8010/api/photos

This is the service:

import { Injectable } from '@angular/core';
import { GLOBAL } from './global';
import { Http } from '@angular/http';


@Injectable({
  providedIn: 'root'
})
export class FotografiasService {
  private url:string;

  constructor(private _http:Http) {
    this.url=GLOBAL.url;
   }

   getFotografias(){
     return this._http.get(this.url + 'fotografias')
     .toPromise().then(res=>res.json());
   }
}

This is the component

import { Component, OnInit } from '@angular/core';
import { FotografiasService } from 'src/app/services/fotografias.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public fotografias:any[] | undefined;
  constructor(private _serviceFotografias:FotografiasService) { }

  ngOnInit(): void {
    this.getFotografias();
  }

  getFotografias(){
    this._serviceFotografias.getFotografias()
    .then(response=>{
      this.fotografias=response.fotografias;
    })
    .catch(error=>{
      console.log(error);
    })
  }

}

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatIconModule } from '@angular/material/icon';
import { HttpModule } from '@angular/http';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { AppRouting } from './routes/routing';

@NgModule({ 
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatIconModule,
    AppRouting,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
bguiz
  • 27,371
  • 47
  • 154
  • 243
Nalf04
  • 9
  • 3
  • This might help: https://stackoverflow.com/questions/37172928/angular-cli-server-how-to-proxy-api-requests-to-another-server – tromgy Oct 13 '21 at 18:00
  • 1
    You did not provided important file code that is `global.ts` file(specially url), In `global.ts` file, `url` must be `http://localhost:8010/api/photos` instead of `localhost:8010/api/photos` – Arif Khan Oct 13 '21 at 18:10

0 Answers0