Archive for May, 2020

May 12th, 2020
9:35 am
Template Strings in configuration data – IE11 issues

Posted under Angular & TypeScript & Web

I was leaning towards using .js files rather than strict JSON for configuration data (and therefore loading them dynamically via a script tag). This allows some additional intelligence in the files that you could not get with JSON.

One point of interest was to use template strings via backticks to allow parameter substitution, as I have detailed in this post here.

The problem with this approach is that IE11 will not support it and cannot therefore load the .js file. Whilst this could be worked around by using typescript and transpiling, this is clearly not ideal and not the focus for a configuration file – I wanted it to be plain edited text.

As in the target use case I did not need placeholder substitution, my workaround was to use ordinary single quoted strings with continuation appended to each line as ” \”. This worked fine in IE11.

This does mean, however, that for substition and other advanced tricks, you would need to take the other approaches noted in the above post if you wanted to support IE11.

Comments Off on Template Strings in configuration data – IE11 issues

May 8th, 2020
7:40 am
Dynamic String Interpolation in Typescript/Angular

Posted under Angular & TypeScript & Web

There does not appear to be a truly dynamic string interpolator available, such that the string template with placeholders can be just a string obtained from anywhere, and then used as a template in the way that e.g. java does with String.format() and MessageFormat.format().

There are 2 ways around this:

1/ Using a lambda allows delayed evaluation of the standard string interpolator as you can pass parameters to the lambda.

If the configuration data containing the templates etc. is a .js file rather than pure JSON (in the way that I do my configuration), it is possible to actually store the lambdas in the configuration data in ‘JSON-like’ object literals. Obviously care is needed with error handling etc. when loading the .js file. This trick is detailed hereThis is a nice approach in that you can use all the standard string interpolation tricks, and also others such as ternary expressions etc., in your configuration data, making it as intelligent as you need to. The downer is that it is no longer pure JSON, but it can be loaded dynamically from a .js file. Another issue with this approach is that it is not supported by IE11, and so cannot be used if this is a factor, as per my other post on this here.

2/ Roll your own template interpolator. This approach is detailed here.

This allows your configuration/template data to be stored as pure JSON. However the downside is that you are rolling your own solution. As a comment points out in the above post, it is perhaps surprising that between Typescript and Angular there is no out-of-the-box solution for this. Whilst the built-in interpolation can be made flexible as detailed in 1/, the approach taken by Java using e.g. String.format() and MessageFormat.format(), whereby built in libraries provide the support at run time, does give more flexibility in this regard. Whilst other templating libraries might be used, such as Handlebars or Mustache, it is undesirable to load one of them as well in an Angular app as Angular has its own templating (albeit with the limitations discussed).

 

Comments Off on Dynamic String Interpolation in Typescript/Angular