Angular Service HttpClient API requests 404 in production, but not locally

Issue

I have an Angular web app, and a backend Node JS API, both hosted on Azure in Web Apps. I have used postman to verify that the API is running correctly. My local Dev version of the Angular app also currently points at the live API, and the requests work as expected. However, the deployed Angular App only returns 404's when making requests to the API.

I have the following proxy.confg.json:

{
"/api/*" : {
    "target" : "https://{domain}.azurewebsites.net",
    "pathRewrite": {
        "^/api" : ""
    },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
}

I have configured the proxy for use in production builds in angular.json as follows:

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "browserTarget": "{project}:build:production",
          "proxyConfig" : "proxy.conf.json"
        }

When running locally using the proxy.confg.json (both "ng serve" and "ng serve --configuration production", API requests work as expected. However, the live app gives me the following two errors in the browser console:

XHR GET https://{domain}.azurewebsites.net/api/getData
Object { headers: {…}, status: 404, statusText: "Not Found", url: "https://{domain}.azurewebsites.net/api/getData", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://{domain}.azurewebsites.net/api/getData: 404 Not Found", error: "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable." }

Solution

Thanks @ Penleychan your comments helped lot.

When you try to deploy dev to production environment you have to configure environment specific defalts

Angular project src/environments/ folder contains the base configuration file, environment.ts, which provides a default environment. You can add override defaults for additional environments, such as production (environment.prod.ts) and staging(environment.stage.ts), in target-specific configuration files.

In your environment.prod.ts environment file you can add your default environment values

export const environment = {
    production: true,
    apiUrl: 'http://my-prod-url'
};

use the environment configurations in your components you need to import the original environments file:

import { environment } from './../environments/environment';

Configure target-specific file replacement. By default no files are replaced. You can add file replacements for specific build targets in angular.json``:

"configurations": {
    "production": {
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ],
    
    ...

If you are using the serve command to use the targeted build configuration.Add it to the "serve:configurations" section of angular.json:

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
    "browserTarget": "your-project-name:build"
},
"configurations": {
    "production": {
        "browserTarget": "your-project-name:build:production"
    }
    }
},

Which you are already done it. So once you added the Environment specific config you can fix the issue

Refer here

Answered By - DelliganeshS-MT