I have an angular 9 project which is part of an application suite installer [Wix installer]. One of the settings used by the angular app is the address of API which it fetches its data from some configurable address. I know that I can have many angular environment files and simply use commands such as the followings:
environment.env1.ts
export const environment = {
production: true,
apiAddress: "http://apiAddress1/api/",
};
ng build --prod --configuration=env1
or
environment.env2.ts
export const environment = {
production: true,
apiAddress: "http://apiAddress2/api/",
};
ng build --prod --configuration=env2
This means for every potential API address I need to do a new build and run above command. How can I overcome above scenario and configure output binaries after the build?
Assuming there is no clear way of achieving the after-built configuration, can I do 'simple string replace' for the address of API in the generated main*.js files? Would there be any side effects?
It is probably possible to perform a find and replace on the generated files after the build completes, but that just feels wrong.
Instead create a configuration.json file and put it in your assets folder. Then in your application, reference the file directly by using an import. You might have to enable this functionality by setting
resolveJsonModule
totrue
in your tsconfig.json.Now, after the application is built, the value can be replaced in configuration.json without fear of unintended side effects by using simple techniques such as in NodeJs with
fs.readFileSync(path)
andfs.writeFileSync(path, JSON.stringify(data))
.Sample xyz.module.ts section