I am currently working on a strategy to handle multiple environments as easy as possible in Angular CLI.
For this I follow this approach:
My goal is to have the base URLs for different REST endpoints just once and all the environments should have them (extending or something).
What is the best way to implement this?
You can use multiple environment files, here is how you can do it and when you build you have to specify the configuration (examples: prod, test, uat)
you have to add all your configurations in angular.json file
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"develop": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.develop.ts"
}
]
},
"release": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.release.ts"
}
]
},
"uat": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.uat.ts"
}
]
},
}
add yours urls for each file, and when you build or serve your app locally, you have to specify the configuration
ng build --configuration=uat // for uat env
ng serve --configuration=uat
or
ng build --prod // for production env
import it that way, and it will pick the right one based on the chosen configuration
import { environment } from 'src/environments/environment';
If you are using webpack, you can create an environment.ts file with all environment specific data as properties in an object....
{
environment: 'dev',
baseurl: 'http://myBaseUrl'
}
create a separate file for each environment (prod, qa, etc...) with the same object and properties. import the plain environment.ts file when you need environment information....
Then in each webpack config use the NormalModuleReplacementPlugin...
new webpack.NormalModuleReplacementPlugin(/\.\/environment\./, './environment.qa.ts')
You are basically telling webpack wherever I import environment replace it with environment with environment.qa (or whichever version)
