nativescript-angular
nativescript-angular copied to clipboard
Unable to gather data on Angular from .Net Api
Well just started following a book of Angular & .Net api. Although copy everything same but getting an error On the backend I've .Net core Api & on frontend Angular. I get weather app (.net standard app) data on to Angular host 4200 but getting an error, although backend server works & shows Weather app data without any error but on Angular side i get following error. What do missing here.
while run ng serve --proxy-config proxy.config.json
[HPM] Error occurred while trying to proxy request /api/weatherForecast from localhost:4200 to http://localhost:51045/ (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
on console.log it says:
GET http://localhost:4200/api/weatherForecast 504 (Gateway Timeout)
ERROR HttpErrorResponse {headers: HttpHeaders, status: 504, statusText: "Gateway Timeout", url: "http://localhost:4200/api/weatherForecast", ok: false, …}
Following are my angular script:
api.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' }) export class ApiService {
constructor(private http: HttpClient) { }
getData() { return this.http.get('/api/weatherForecast').subscribe(res => { console.log(res); }); } }
app.component.ts:
import { Component } from '@angular/core'; import { ApiService } from './services/api.service';
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'accounting-app';
constructor(public apiService: ApiService){}
ngOnInit(){ this.apiService.getData(); } }
proxy.config.json
{ "/api": { "target": "http://localhost:5000", "secure": false } }
app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
test your api properly with postman any other request builders.