My current project is built on Angular 8, and I am in the process of publishing it locally before deploying it. When running the build
step, I specify an environment name called internalprod
:
src
├───app
├───environments
│ environment.Debug.ts
│ environment.InternalProd.ts
│ environment.PreLive.ts
│ environment.prod.ts
│ environment.Test.ts
│ environment.ts
└───js
In the file environment.InternalProd.ts:
export const environment = {
...
environmentName: "InternalProd"
};
When looking at angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
...
"configurations": {
...
"internalprod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.InternalProd.ts"
}
],
"baseHref": "/",
"deployUrl": "/",
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": true,
"commonChunk": true,
"buildOptimizer": true,
"poll": 500
},
...
}
To initiate the build process, I navigate to the src
directory and execute the command
npm run ng build --configuration=internalprod
After building, I notice that the variables are not being replaced with the internalProd
configuration in the generated dist/myproject/main-es5.js
and dist/myproject/main-es2015.js
files within the var environment =
section:
var environment = {
...
environmentName: "Development"
}
};
It seems that the environment.Debug.ts
file is being picked up instead, which sets the environmentName
variable to Development
. This behavior is puzzling to me.