Lazy Load Translation Files In Angular Using Transloco
Tags: angular, internationalization, translate, optimization
Published: 2019-10-11 07:08:34

Originally published at [shahar.kazaz](https://medium.com/@shahar.kazaz/lazy-load-translation-files-in-angular-using-transloco-2d3afed116ce)

In this article, we will learn how we can use the internationalization library for Angular Transloco to lazy load translation files in our Angular application. There are two advantages to this approach. First, we make our initial bundle smaller, which will improve the application load time. Second, we are less exposed to merge conflicts.

Let's see how easy it is to do it with Transloco 💪

Let's say we have a user profile page. We want to create separate translation files for this page and load them only when the user navigates there. 

First, we need to create a user-profile folder (or whatever name you choose); In it, we create a translation file for each language we want to support:

```
├─ i18n/
   ├─ en.json
   ├─ es.json
   ├─ profile-page/
      ├─ en.json
      ├─ es.json
```

In each file will add only the relevant translations for this page:

```json
{
   "title": "User Profile"
}
```

Let's continue and create the UserProfile module and routes:

```ts
const routes: Routes = [
  {
    path: '',
    component: UserProfileComponent
  }
];

@NgModule({
  declarations: [UserProfileComponent],
  providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'user-profile' }],
  imports: [CommonModule, RouterModule.forChild(routes), TranslocoModule]
})
export class UserProfileModule {}
```

Adding the `TRANSLOCO_SCOPE` to the providers instruct Transloco load the corresponding scope based on the active language and merge it under the scope namespace into the active language translation object.

For example, if the active language is en, it will load the `user-profile/en.json` file, and will set the translation to be the following:

```
{
  header: '',
  login: '',
  userProfile: {
    title: 'User Profile'
  }
}
```

Now we can access each one of the user profile keys by using the `userProfile` namespace:

```html
<ng-container *transloco="let t">
   {{ t('userProfile.title') }}
   {{ t('title') }}
</ng-container>
```

By default, the namespace will be the scope name (camel-cased), but we can override it in two ways:

By using the `config.scopeMapping` config:

```
{
  provide: TRANSLOCO_CONFIG,
   useValue: {
    defaultLang: 'en',
    scopeMapping: {
      'user-profile': 'profile'
    }
  }
}
```

By providing a custom alias name in the module/component scope provider:

```
{
  provide: TRANSLOCO_SCOPE,
  useValue: { scope: 'user-profile', alias: 'profile' }
}
```

Now we can access it through a custom name we provided instead of the original scope name (profile in our case):

```html
<ng-container *transloco="let t">
   {{ t('profile.title') }}
   {{ t('title') }}
</ng-container>
```

***

Here is some more great content about Transloco:

[![🚀 Introducing Transloco: Angular Internationalization Done Right](https://thepracticaldev.s3.amazonaws.com/i/0byy9oicu3el19il9bx2.png)](https://netbasal.com/introducing-transloco-angular-internationalization-done-right-54710337630c)

[![🎉 Good Things Come to Those Who Wait: What’s new in Transloco](https://thepracticaldev.s3.amazonaws.com/i/0o19r97lw5jlti15nryp.png)](https://netbasal.com/good-things-come-to-those-who-wait-whats-new-in-transloco-5dadf886b485)

[![Creating Search Engine-Friendly Internationalized Apps with Angular Universal and Transloco 🌐](https://thepracticaldev.s3.amazonaws.com/i/cv1393qstlvo16qgk81x.jpg)](https://medium.com/@shahar.kazaz/creating-search-engine-friendly-internationalized-apps-with-angular-universal-and-transloco-ab9583cfb5ac)