In my project I have 3 environment files (dev, staging, production). And I want to change the them for each dist folder (when deploying to dev I need the envi dev link to take the data from.. same for staging and prod) The files contains these
export const environment = {
production: true,
hmr: false,
backend: false,
staging: false,
apiKey: 'prodKey',
API_URL: "my backend link"
};
Of course the production is false in dev and staging envs.. I also added in angular.json this (same for staging)
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
],
"outputPath": "dist/production"
},
But when I do build I usually commment a file and use the other to do build and deploy as here in my api file
import { environment } from 'src/environments/environment';
// import { environment } from "src//environments/environment.stage";
// import { environment } from "src//environments/environment.prod";
const API_URL = environment.API_URL;
commmands are: ng build and ng build --configuration=staging and ng build --prod
But I dont want to keep commenting the API envir.. as above, I want it to change automatically after I do build and change in dist files for each environment so I can deploy normally to git and do normal pipeline.
Any idea? Thanks
CodePudding user response:
You can simply create a build configuration for staging and use fileReplacements
to replace environment with the file you need like it's done for production. You've mentioned running ng build --configuration=staging
but your config snippet doesn't have a configuration section for staging, assuming you have it anyway you should set your fileReplacements
field up properly.
CodePudding user response:
Leave all imports as
import { environment } from 'src/environments/environment';
Extend the configurations object in angular.json
extending the configurations object:
... // angular.json
configurations": {
"production" {...} // leave as it is,
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
}
}