Angular 2 externalization (properties file)

Question

What is the approved way of externalizing string constant in Angular 2 application, or in JavaScript application in general? I mean something like .properties file in Java, where backend connection attributes are stored.

As far as I know, JavaScript doesn't support reading from file in client end easily. My current solution is to use injectable service class, which stores key-value pairs as an object attributes. Then I just inject the service in other services which needs those values. Is this justifiable method, or does JavaScript/A2 provide some more uniform way to handle value injection?

There is something work-in-progress to be released "soon" by the Angular team. — Günter Zöchbauer, Jun 07 '16 at 13:43

score 0 · Answer 1 · edited May 23 '17 at 12:02

I think that the way to do is the right one.

You could bootstrap asynchronously after your request(s) complete(s). Here is a sample:

var app = platform(BROWSER_PROVIDERS)
  .application([BROWSER_APP_PROVIDERS, appProviders]);

var service = app.injector.get(ConfigService);

service.getConfig().flatMap((config) => {
  var configProvider = new Provider('config', { useValue: config });
  return app.bootstrap(appComponentType, [ companiesProvider ]);
}).toPromise();

See this question:

How to defer Main component's initialization of dependent components so that some promises may get resolved

I see another approach if you're able to update index.html page (the main entry point) on the server side. Here is a sample:

<script>
  var params = {"token": "@User.Token", "xxx": "@User.Yyy"};
  System.import('app/main').then((module) => {
    module.main(params);
  });
</script>

See this question:

How to pass parameters rendered from backend to angular2 bootstrap method

You could also register an APP_INITIALIZER provider for this:

provide(APP_INITIALIZER, {
  useFactory: (service:ConfigService) => () => service.loadConfig(), 
  deps:[ConfigService, HTTP_PROVIDERS],
  multi: true}),

See this issue for more details:

https://github.com/angular/angular/issues/9047

So much verbosity to implement the simplest of the tasks. Angular 2 code seems to be ultimately hard to maintain, I hope they will adapt convention over configuration approach over time — Tuomas Toivonen, Jun 07 '16 at 14:02
Yes, perhaps this will be easier in the future with tools like ng-constants that will tackle packaging... — Thierry Templier, Jun 07 '16 at 16:50

Angular 2 externalization (properties file)

1 Answers1