APP_INITIALIZER alternative

[ccadieux]

We had similar requirements.

• Devops wanted a per environment config.
• Build once for all environments.
• Prevent people checking in passwords and secrets.

We ended up using APP_INITIALIZER to load a json file with our configuration. Here's a minimal example: https://embed.plnkr.co/295SxTOZEZUbiyrhAKh2/

Some other links https://github.com/angular/angular/issues/9047 https://stackoverflow.com/questions/39033835/angularjs2-preload-server-configuration-before-the-application-starts

[natchiketa]

@ccadieux That's a nice solution! The thing for me was that, since we do builds using something like a GoCD box, I wanted to use OS environment variables. But yeah, this approach might be more pragmatic. It certainly involves fewer lines of code! 🤘

[jjlorenzo]

In a current project (angular:frontend + django:api-backend) I use APP_INITIALIZER to load some info from the api backend server in this scenario APP_INITIALIZER works for me.

Nevertheless for what we are try to solving here https://medium.com/@natchiketa/angular-cli-and-os-environment-variables-4cfa3b849659 I fail to see why your approach with APP_INITIALIZER loading a local file is different from the regular conventions of angular cli:

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

I've achieved this in the backend using https://github.com/joke2k/django-environ with good results, in this kind of projects where the app runs in the client and not in the server I prefer to solve this problem at build time, so looking at the built code I can see all env settings I'm exposing to the client.

Did I'm missing something? I'll like your opinions!

[jjlorenzo]

Probably I will end with something different since I'm using ansible, I can generate the env files with the proper settings for the env I'm building

[kenisteward]

@jjlorenzo I believe @ccadieux 's answer is was due to what he said in dev ops required that after the build is made no more new builds should be made.

If you go with the environment.ts method for each environment you must do a rebuild of the code to be able to properly get the values into the app.

I also use configuration.json in APP_INITIALIZER for the exact same reason. After the code is built, no new builds are made as it is being promoted to production.

[masimplo]

@ccadieux you mentioned that you do a single build using this approach. How is the final built code know which environment to load the config for? (i.e. hit uat.example.com/config vs app.example.com/config)

[jjlorenzo]

@kenisteward good catch, your'e right.

[ccadieux]

Basically, not much is in the environment file anymore. Everything that can change is in the config file for each environment.

[masimplo]

I am probably missing something. If I have 10 config values that are different between UAT and Production (so they are stored in either 2 different files or in 2 different urls), how does APP_INITIALIZER decide which of the two to load at runtime? Or do you always reference a single file in a specific location and change this file's contents depending on the environment.

The reason I am asking is because I would like to load the configuration from a different location depending on the environment. eg. config.prod.json and config.dev.json or example.com/dev/config.json and example.com/prod/config.json but this does not seem possible with this setup.

[jjlorenzo]

my 5 cents, add a property to every environment.ts with the env name, for example and use this value in the APP_INITIALIZER to determine the url.

[kenisteward]

I agree with @jjlorenzo . If you want to take that approach just do that.

Otherwise just template your config and change that one file.

On Mon, May 7, 2018, 6:13 PM jjlorenzo [email protected] wrote:

my 5 cents, add a property to every environment.ts with the env name, for example and use this value in the APP_INITIALIZER to determine the url.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/natchiketa/angular-cli-envvars/issues/1#issuecomment-387223114, or mute the thread https://github.com/notifications/unsubscribe-auth/AMPLtYS9BfhnybLMFAJghYjyCDWNdnOiks5twMb-gaJpZM4N7jev .