🎉 Good Things Come to Those Who Wait: What’s new in Transloco
The next generation i18n library for Angular just got better! Updates for Transloco, the Angular translation library that was recently released, are coming in fast and furious. This newest version is full of 🔥 new features that you requested. It’s another step in our plan to provide you with a better i18n experience.
Let’s have a look at what’s new:
🦊 Lazy Load Reimagined
When working in a large localized application, we can benefit from lazy loading translation files to make our bundle smaller and to avoid merge conflicts with other developers.
For example, let’s imagine that we’ve got a contacts page module, which we lazy load; We’d like to create separate translation files for it, and load them only when the user navigates there.
First, we need to create a contacts folder (or whatever name you choose); In it, we create a translation file for each language we want to support:
Now the only thing left to do is to instruct Transloco to load the contacts scope by setting the TRANSLOCO_SCOPE token in our lazy load module, and let Transloco do its magic:
Now, when the user navigates to the contacts page, Transloco will load the corresponding scope, based on the current language, and merge it under the scope namespace into the active language translation object.
For example, if the current language is en (English), it will load the contacts/en.json file, and set the response to be the following:
Now we can access each one of the contacts keys by using the contacts namespace:
For more information about lazy load, check out the docs. (Courtesy of )
🦄 Be DRY with the new read option
We added a read input to the structural directive that will save you some typing when working with nested objects. Let’s say we need to use the contacts scope all over the template; We can tell Transloco to set the context of the translation from a particular key (even deeply nested context):
Now we don’t need to repeat the contacts key in each translation. (Courtesy of Aleš)
⭐️ Static Language Support
There are times we may need to use a different language in a specific part of the template, or in a particular component or module.
In its previous versions, Transloco offered this functionality, but only as long as the initial active language is displayed. For example, if we use the following code:
It will display the title from the Spanish file initially, but when the user changes the active language, this will be changed as well. One of the requests we got from people was the ability to keep the language static. To do so, we’ve added the static option:
Now it will remain Spanish. For more information about using multiple languages simultaneously, check out the docs.
👉 SSR Support
When employing Angular SSR, we need to change our loader base path to be absolute instead of relative, in order for it to work. To make it seamless for you we added a new option to Transloco — ng add schematics — that’ll do the work for you:
🤯 MessageFormat Plugin
We’ve added a new official plugin for messageformat support. Messageformat is a mechanism for handling both pluralization and gender in your app. To use it, install the @ngneat/transloco-messageformat package, and override the default transpiler, setting it to MessageFormatTranspiler:
The MessageFormatTranspiler is compatible with the DefaultTranspiler, therefore you can switch without worrying it’ll break your current translations. Once set, you can use it in your i18n translation files:
And in your code:
(Courtesy of Colum Ferry)
💪 Persist Translations Plugin
We’ve added an official plugin that provides the functionality of persisting translation files via a provided storage. To use it install @ngneat/transloco-persist-translations, import the TranslocoPersistTranslationsModule into your AppModule, and provide it with the loader and the storage you want to use:
By default, the plugin uses a TTL of one day, but you can always change it by setting the TTL property.
You can also use async storage such as IndexedDB. For more information, checkout the docs. (Courtesy of )
🙌 Persist Language Plugin
Some applications may not offer to save the user-chosen language in the server. You can imagine that this might annoy users, who’d have to re-select the language each time they visit the application.
To easily improve their user experience, we’ve added an official plugin that provides the functionality of persisting the current active language to the provided storage.
To use it install @ngneat/transloco-persist-lang, import the TranslocoPersistLangModule into your AppModule, and provide it with the loader and the storage you want to use.
With this setup, whenever the user changes the language, the plugin will save it in the provided storage and set it as active when the user returns to the application.
For more information, check out the docs.
👁 Preload Language Plugin
We’ve added a new official plugin that provides you with the ability to preload languages when the browser is idle, by using the requestIdleCallback API.
To use it install @ngneat/transloco-preload-langs, import the TranslocoPreloadLangsModule into your AppModule, and provide it with languages you want to preload:
For more information, check out the docs.
😎 What’s Next
We’re working on a new powerful CLI tool that will help you with the development process, stay tuned. As always, we would ❤️ to hear more feedback and new feature requests from you.
🚀 More Solutions
Transloco is one member of a suite of solutions I’ve created for developers. They include:
- Akita: One of the leading state management libraries, used in countless production environments. Whether it’s entities arriving from the server or UI state data, Akita has custom-built stores, powerful tools, and tailor-made plugins, which all help to manage the data and negate the need for massive amounts of boilerplate code.
- Spectator: A library that runs as an additional layer on top of the Angular testing framework, that saves you from writing a ton of boilerplate. V4 just came out!
- And of course, Transloco: Angular Internationalization Done Right 😀
Follow me on Medium or Twitter to read more about Angular, Akita and JS!
