CODEWITHSUNDEEP
angularproxyangular6asp.net-core-webapi
kursat sonmez
kursat sonmez

Reputation: 908

'not found' error with proxy config in Angular 6

I work with .net Core Web API + Angular 6.

Angular port: 4200 and Web API port: 62633

I want to work with the proxy config in Angular 6 but always getting the same error. I have read the answers related to this problem but I cannot find a solution. source: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

proxy.conf.js

const PROXY_CONFIG = {
    "/api": {
        "target": "http://localhost:62633",
        "secure": false,
        "pathRewrite": {
            "^/api": "http://localhost:62633"
        },
    }
}
module.exports = PROXY_CONFIG;

angular.json

"architect": {
...
"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "projectname:build",
            "proxyConfig": "proxy.conf.js",
            "port": 4200
          },
          "configurations": {
            "production": {
              "browserTarget": "projectname:build:production"
            }
          }
        }...
}

account.service.ts

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

import { LoginDto } from '../../../dtos/account/accountDtos';
import { Observable } from 'rxjs';

@Injectable()
export class AccountService {
  constructor(private hC: HttpClient) { }

  login(loginModel: LoginDto): Observable<LoginDto> {
    return this.hC.post<LoginDto>('/api/login', loginModel);
  }
}

Result in the console:

zone.js:2969 POST http://localhost:4200/api/login 404 (Not Found)

HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/login", ok: false, …}

I do not think so, however, the source of error, could it be related to packages? Thanks.

Upvotes: 1

Views: 3022

Answers (2)

kursat sonmez
kursat sonmez

Reputation: 908

Problem is solved. Those who encounter the same error, please check your API :)

Also,

PROXY_CONFIG

"pathRewrite": {
            "^/api": ""
        },

and account.service.ts

login(loginModel: LoginDto): Observable<APIResult> {
    return this.hC.post<APIResult>('/api/account/login', loginModel.toJSON());
  }

Upvotes: 1

hjbello
hjbello

Reputation: 651

using 

return this.hC.post<LoginDto>('/api/login', loginModel);

It seems to me that you are doing a post request to your own angular server instead of your back end , Are you sure that you want that?, Perhaps you need something like

return this.hC.post<LoginDto>(this.yourBackendUrl + '/api/login', loginModel);

setting in your constructor

this.yourBackendUrl = this.PROXY_CONFIG["/api"]["target"]

Upvotes: 0

Related Questions