In Angular how to Create a Configurable Property file to read a property, in production environment?

Question

In my application, I have created appMessages.ts, which holds a variable like:

export const appMessages = {
    my_url: 'http://localhost:8080/myApp',
}

I`m basically using this to make REST calls. In real production environment, The variable value keeps changing, and needs to be configurable. If I use appMessages.ts, and create a production bundle, using

ng build --prod

Problem is, appMessages.ts is not configurable anymore. Is there an Angular way to create a configurable property file, which can be configured dynamically with 'my_url' depending on the current development environment?

Can some kind of property file, which can be read after the product has been deployed?

Why does that variable change in a production environment? That should be something that is kept within the environment files. But yeah, you could store it in a json file or in your DB and fetch it on app load to use. — LLai, Dec 04 '17 at 17:49
Specifically, the port number is something that can change in different environments. Also, I can't use dB (solely because dB change would be a big change in my project). — Rahul, Dec 04 '17 at 18:07
A json file containing this info may be your best bet then. But you will still need to update your angular code to fetch the json on app load. — LLai, Dec 04 '17 at 18:11
Update as in? I am working with Angular 5. Also can you please provide me with a link which has an example for the same? — Rahul, Dec 04 '17 at 18:16
Instead of your app pulling from a local variable (that was bundled in the bundling process), you are removing the variable from your app. This means for your app to use it, you will have to fetch that variable (from the external json file). Here is an existing [SO question](https://stackoverflow.com/questions/41619443/how-to-call-an-rest-api-while-bootstrapping-angular-2-app) on how to make an api call on app load — LLai, Dec 04 '17 at 18:21

score 2 · Answer 1 · answered Jul 23 '19 at 13:04

You can create the following config.json in the src directory and then use the APP_INITIALIZER provider.

{
    "myUrl": "http://172.22.251.207:20235"
}

app.module.ts

...
export function initConfig(config: AppConfigService) {
  return () => config.load();
}
...
providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [AppConfigService],
      multi: true
    }]
...

app-config.service.ts

@Injectable({
    providedIn: 'root'
})
export class AppConfigService {
    private config: Config = null;
    public configSubject: Subject<any> = new Subject<any>();

    constructor(private http: HttpClient) { }

    public load() {
        return this.http.get(environment.deployUrl + 'config.json')
            .toPromise()
            .then((config: any) => {
                this.config = config;
                this.configSubject.next(this.config);
            })
            .catch((err: any) => {
                console.error('ERROR: ' + err);
            })
    }

    getMyUrl() {
        return this.config.myUrl;
    }
}

export class Config {
    myUrl: string;
}

In Angular how to Create a Configurable Property file to read a property, in production environment?

1 Answers1