Angular12 with .NET6 WEBAPI Error: [ECONNREFUSED] Error occurred while proxying request

Question

I have an Angular12 project with a .NET 6 WEB API project under the same solution in visual studio 2022. First, I created a standalone angular project and then added .NET 6 WEB API project. While creating the angular project Visual studio 2022 asks whether we want to integrate the WEB API project with it, which I selected, and it added a proxy.conf.js file within the Angular project to communicate with the WEB API project which should have the HTTPS base URL of the WEB API project.

The issue is that I am not able to build these two applications together it seems like the WEB API project never gets started.

proxy.conf.js in Angular project:

const PROXY_CONFIG = [
{
    context: [
      "/weatherforecast",
    ],
    target: "https://localhost:7294",
    secure: false
  }
]

module.exports = PROXY_CONFIG;

In the solution properties:

I moved the WEB API project to the top so that it starts before the Angular project.
When I run the application(Angular and WEB API both are set to start together) it shows below output in the output window:

These errors in the chrome debug console window when I browse to localhost:4200:

Configuration Manager of the solution has the following configurations:

And the Angular project has below configurations:

LaunchSettings.json:

{
"$schema": "https://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
  "applicationUrl": "http://localhost:64441",
  "sslPort": 44397
  }
},
"profiles": {
  "MyApp_API": {
  "commandName": "Project",
  "launchUrl": "swagger",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  },
  "applicationUrl": "https://localhost:7294;http://localhost:5294",
  "dotnetRunMessages": true
},
  "IIS Express": {
  "commandName": "IISExpress",
  "launchBrowser": true,
  "launchUrl": "swagger",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

} }

Answer 1

Your issue is that your proxy isn't configured properly. I solved this issue by ditching the default proxy.conf.js file. Instead, I created a file called 'proxy.conf.json' in my src directory which contains the following:

{
  "/api/*": { // 
    "target": "https://localhost:7294",
    "secure": false,
    "logLevel": "debug",
    "pathRewrite": { "^/api": "" }
  }
}

Next, to use your new proxy.conf.json file, update the proxyConfig value for your serve options inside of your angular.json file:

"serve": {
  "options": {
    "proxyConfig": "src/proxy.conf.json"
  }
},

Now that your proxy is configured, you can test it out by building a service in your Angular app to retrieve the data:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders, HttpEventType } from "@angular/common/http";
import { WeatherForecast } from '../interfaces/weather-forecast';



@Injectable({
  providedIn: 'root'
})
export class WeatherService {
  private apiUrl = 'api/weatherforecast/';
  constructor(private http: HttpClient) { }

  getWeatherForecast(): Observable<WeatherForecast[]> {
    return this.http.get<WeatherForecast[]>(this.apiUrl);
  }
}

... and then inject that service into a component:

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { WeatherForecast } from './interfaces/weather-forecast';
import { WeatherService } from './services/weather.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public forecasts?: WeatherForecast[];

  constructor(private http: WeatherService) {
    this.http.getWeatherForecast().subscribe(forecasts => this.forecasts = forecasts);
  }

This solution worked for me using Angular 14.