Environment variables in environment.ts that come with ng cli project is good for managing variables until build. Post build,Webpack simply replaces all references with their corresponding string values. You will have to edit minified, bundled main..js file by finding and replacing by the value you gave for the configuration property. It’s doable, but cumbersome to do so manually, because this main.*.js is a long minified single line. If you can live with it, a simple find and replce script before deployment would work well.
If you want to make this configuration easily editable post build, there are few ways to do that.
- Keep configuration in a .json file, download it with a get request in a configuration service,cache them for all further requests
- Using pleload hook in App module
- Using a simple IIFE(Immediately invoked function expression) to inject configuration to window object and loading it in index.html before angular starts bootstraps
This works well with ngrx or any components in your project that needs configuration but doesn’t wait for json to load.
- Solved it differently? Let me know in the comments. It could be the best way to do this 😂
