6

For example, we have a file with localized strings

{
  "title": "Example title",
  "description": "Some text"
}

Let's assume we also have a component with some custom decorator @I18n()

@Component({ ... })
@I18n('./my-translations.json')
export class MyAngularComponent {

}

And template

<h2>{{ i18n.title }}</h2>
<p>{{ i18n.description }}</p>

Is it possible to include one more external resource (besides templateUrl and styleUrls) into the component?

Taras Hupalo
  • 1,337
  • 2
  • 16
  • 29
  • Sounds like you want to extend the @Component decorator -> https://stackoverflow.com/questions/36837421/extending-component-decorator-with-base-class-decorator – Ryan E. Aug 13 '18 at 11:47
  • Extending the @Component decorator is also an option. The problem is to asynchronously load external resource before Angular creates the component. – Taras Hupalo Aug 13 '18 at 12:06

1 Answers1

2

You could extend Component decorator however i would not do that, since it may have undesired effects on compiler and depends on Component changes between angular versions. I would rather allow multiple arguments/variable arguments/array parameter in I18n decoroator or allow multiple I18n decorators, it means that I18n decorator should check for class modifications done by previous decorators and append its data accordingly.

kemsky
  • 14,727
  • 3
  • 32
  • 51
  • Yes, I can add multiple parameters to the `I18n` decorator like `@I18n('./en.json', './fr.json', './es.json')`. But how to make it load the correspondent json file. – Taras Hupalo Aug 17 '18 at 04:51
  • Without control over library that provides I18n decorator you can not change its behaviour. – kemsky Aug 17 '18 at 08:10
  • `I18n` is not a part of a library. It's might be my own code supposed to load a file and assign it's data to the field `i18n` of the component in order to use it in the template (see example above) – Taras Hupalo Aug 17 '18 at 09:50
  • I just don't see a way to load a file located next to the component source code – Taras Hupalo Aug 17 '18 at 09:52
  • Webpack allows importing json files as objects (depending on version), then you can pass imported objects to decorator, which can merge objects into class field. – kemsky Aug 17 '18 at 12:24
  • Sounds promising :). Could you provide a link or an example? Don't really understand how to do that import. – Taras Hupalo Aug 17 '18 at 12:47
  • Since webpack >= v2.0.0, importing of JSON files will work by default. i.e. `import { Translations } from '../translations/translations.json';` – kemsky Aug 17 '18 at 14:35
  • If I have a few JSON files for different languages then I have to import all of them and pass into the decorator. It's not really what I want. – Taras Hupalo Aug 20 '18 at 11:48
  • You can use webpacks replace plugin and adjust locale at build time – kemsky Aug 20 '18 at 12:41
  • Can I use it with Angular CLI? – Taras Hupalo Aug 20 '18 at 16:48
  • See https://medium.com/dailyjs/angular-cli-6-under-the-hood-builders-demystified-f0690ebcf01 – kemsky Aug 20 '18 at 18:49