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 Shahar Kazaz)

🦄 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 Itay Oded)

🙌 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.