Angular: Read settings from Json files

[rachanee-mwp]

Please modify Angular modules to read settings from Json files instead of environment.ts to allow overwriting settings in CD process, for instance change API Url per deploying environment.
We saw the implementation of AppPreBootstrap which load settings from Json in ASP.NET Zero and tried to implement the logic in AbpCommercial but could not make it work somehow.

[armanozak]

Hi @rachanee-mwp,

We cannot read settings from JSON files instead of environment files, because as described here this is the default and common way of getting application setup in Angular. There is also a request to ABP backend at application start, which receives specific application configuration for a user.

If those two do not resolve the requirement in your case, you can use one of Angular's predefined tokens and make an Http request within the token factory. After getting the configuration, you can keep it in a singleton service or pass it to a state for further use.

Please take a look at this article on using an APP_INITIALIZER token. The most common one is the APP_INITIALIZER, but depending on the scenario, PLATFORM_INITIALIZER or APP_BOOTSTRAP_LISTENER may prove to be a better choice.

I wish that answers your question. Please let me know if all is clear.

Have a nice day.

[rachanee-mwp]

Hi @armanozak

Thanks for clarifying and giving list of potential solutions.
The last option which mentions APP_INITIALIZER token is what I'm talking about.
You implement this on ASP.NET Zero and we want the same on AbpCommercial.

[armanozak]

Hi @rachanee-mwp,

Looking for same tools you have in ASP.NET Zero is perfectly understandable. We will consider this as a feature request and will have to discuss if/when/how we should implement such a feature.

I have marked this issue as a feature and added it to the backlog. Yet, since there already is an easy way to do that yourself, I expect this feature to be considered as a relatively low priority one compared to other issues on our roadmap.

If, in the meantime, you come up with a solution that the whole community can benefit from, please do share with us. As long as it suits public use and does not break the current structure of the project, we would most certainly welcome your PR.

Thanks for your contribution.

[rachanee-mwp]

@armanozak

Thanks for considering this as a future feature.

Actually, I have tried to implement the APP_INITIALIZER in AbpCommercial by changing apis.default.url but Abp components are not using the new value. They still connect to the Api URL specified in environment.ts.

[olicooper]

related #3536

[olicooper]

I created something that reads from a json file env.json. I also use a package called deepmerge to replace nested properties in environment.ts with whatever you want and also append new properties.

Its not a production quality implementation but it does the job. The process is roughly as below (works with ABP v3.0.x):

1. Create the environment-config.module.ts
2. Create the extended-config.state.ts
3. Add the EnvironmentConfig module to your main app.module.ts

    OAuthModule.forRoot(),
    CoreModule.forRoot({
      environment,
      skipGetAppConfiguration: true,
    }),

    EnvironmentConfigModule.forRoot({
      configUrl: '/env.json'
    }),