How to replace environment.ts with environment.prod.ts in Angular library?

Question

My goal is to compile Angular application as a library.

The problem is app1-lib do not have fileReplacements, so when app1-lib is compiled. It always use environment.ts instead of environment.prod.ts.

Is there a way to replace file in angular library?

angular.json

    "app1": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "projects/app1",
      "sourceRoot": "projects/app1/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app1",
            "index": "projects/app1/src/index.html",
            "main": "projects/app1/src/main.ts",
            "polyfills": "projects/app1/src/polyfills.ts",
            "tsConfig": "projects/app1/tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "projects/app1/src/favicon.ico",
              "projects/app1/src/assets"
            ],
            "styles": [
              "projects/app1/src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "projects/app1/src/environments/environment.ts",
                  "with": "projects/app1/src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "app1:build:production"
            },
            "development": {
              "browserTarget": "app1:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app1:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/app1/src/test.ts",
            "polyfills": "projects/app1/src/polyfills.ts",
            "tsConfig": "projects/app1/tsconfig.spec.json",
            "karmaConfig": "projects/app1/karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": [
              "projects/app1/src/favicon.ico",
              "projects/app1/src/assets"
            ],
            "styles": [
              "projects/app1/src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    },
    "app1-lib": {
      "projectType": "library",
      "root": "projects/app1",
      "sourceRoot": "projects/app1/src",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/app1/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/app1/tsconfig.app.json"
            },
            "development": {
              "tsConfig": "projects/app1/tsconfig.app.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/app1/src/test.ts",
            "tsConfig": "projects/app1/tsconfig.spec.json",
            "karmaConfig": "projects/app1/karma.conf.js"
          }
        }
      }
    },

Answer 1

It doesn't really make sense to have that for a library.

You should likely go with a configuration via providers. You could define a function provideMyLib() (like there is provideHttpclient() or provideRouter()) which would setup the providers for your lib. It's great for DX as autocomplete would suggest all the posible options.

Answer 2

The Approach you may want to follow is to use the environment from your app and use the library functions without any state through an environment. This is done via forRoot methods. The state is provided into a module and can be accessed as easy as if it was part of the environment of the library.