[SOLVED] environment defaults to development in angular project ignoring the configuration flag in build and serve commands

I am building a fairly simple angular project and I am in a stage where I need a deploy job. Before this I intend to add environments so the application is automatically calling the right apiUrl. The 3 environments I need are local, development, production.

I have followed the official guidelines: https://v15.angular.io/guide/build, but no matter what I do, the application always starts in the development environment in either the build or serve command.

What I've done: I have updated my angular.json file according to linked guideline, see architect > build & serve:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "chat-viewer-ui": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "/src/environments/environment.ts",
                  "with": "/src/environments/environment.development.ts"
                }
              ]
            },
            "local":{
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "/src/environments/environment.ts",
                  "with": "/src/environments/environment.local.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "chat-viewer-ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "chat-viewer-ui:build:production"
            },
            "development": {
              "browserTarget": "chat-viewer-ui:build:development"
            },
            "local": {
              "browserTarget": "chat-viewer-ui:build:local"
            }
          },
          "defaultConfiguration": "production"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "chat-viewer-ui:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

angular version 15.2.10 angular cli 15.2.10

As far as I understand, the necessary steps are a property under configurations with the names of your environment, so in my case "local", "development", "production". With fileReplacements configuration for each. Since it defaults to production there is no fileReplacement for that.

Next you need to add an environments file for each environment: ng generate environments creates the environemnts folder. I have 3 files in there: environment.development.ts

export const environment = {
production: false,
apiUrl: 'test-apiURL',
name: 'development'
};

environment.local.ts

export const environment = {
production: false,
apiUrl: 'http://localhost:8989/',
name: 'local'
};

environment.ts

export const environment = {
production: true,
apiUrl: 'production-apiURL',
name: 'production'
};

since in the angular.json configuration the environment default is production there is no fileReplacement and the enviroment.ts is production configuration

And lastly here are my build and serve commands:

  "scripts": {
    "ng": "ng",
    "start-prod": "ng serve",
    "start-local": "ng serve --configuration local",
    "start-dev": "ng serve --configuration development",
    "build-prod": "ng build",
    "build-dev": "ng build --configuration development",
    "build-local": "ng build --configuration local",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

In app.component.ts I have added a simple print:

constructor() { 
console.log('running in ' + environment.name + ' environment');
}

I have ran the commands

ng serve --configuration local
ng serve
npm run start-local
npm run start-prod

but for both it outputs everytime 'development' no matter what and not only the output is wrong but also the api url that is requested is wrong

I have also tried running:

ng build --configuration local
npm run build-local

and manually served with npx http-server ./dist and same result

I have deleted node_modules and run: npm install and retried everything

This is driving me nuts. As far as I can see I do everything according to guidelines, I have found a similar post from 2019 but there is no clear answer to that problem for me. I have checked for typos and could also not find anything. Please help