NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

Unable to gather data on Angular from .Net Api #2306

Open kashtech79 opened 3 years ago

kashtech79 commented 3 years ago

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 { }

iamabs2001 commented 3 years ago

test your api properly with postman any other request builders.