How to securely manage environment variables in Angular app deployment

I have an environment.ts file;

export const environment = { token: '345' };

and an enviroment.development.ts file:

export const environment = { token: '123' };

both are on public GitHub repo. I want to deploy an app and set token value as real key value, but using environment variables on Netlify or Vercel doesn't work as I set them for the project. I dont want to write in any part of my app the real access token. How to deploy the app and change the fake token value with real value? If I put the real value in src/environments/environment.development.ts it will be public available but I have to do it since it's the place where Netlify or Vercel takes code from.

If I add:

  production: true,
  token: '345',

the values still are not changed.

Following: https://angular.io/guide/build#configure-target-specific-file-replacements

angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "flightSearch": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/flight-search",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.css",
              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],
            "scripts": [],
            "server": "src/main.server.ts",
            "prerender": true,
            "ssr": {
              "entry": "server.ts"
            }
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.development.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "flightSearch:build:production"
            },
            "development": {
              "buildTarget": "flightSearch:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "flightSearch:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "tsConfig": "tsconfig.spec.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.css"],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "3921564e-694e-4bc9-aa09-49b8c3772415"
  }
}

In your project there will be .gitignore file, here you can include your environment folder, commit will not even show these files, they will be safe in your local system and you can use them to deploy from your local.

Another way is to use Deploy keys(github) where you safely store your keys and then use script with node.js to create the files when you deploy the code.

How to keep your secrets from your source code in an Angular project ?!