Creating Search Engine-friendly Internationalized Apps with Angular Universal and Transloco 🌐
Tags: angular, internationalization, translate, ssr
Published: 2019-09-13 09:08:06

Originally published at [shahar.kazaz](https://medium.com/@shahar.kazaz/creating-search-engine-friendly-internationalized-apps-with-angular-universal-and-transloco-ab9583cfb5ac) 

In this article, I will show you how easily we can add internalization (i18n) support to Angular SSR using the next generation Angular internalization library Transloco. Let's get started.

First, let's create a brand new Angular CLI project:


```bash
npx @angular/cli new transloco-ssr
```


Now, add SSR support by using `@nguniversal/express-engine` schematics:


``` bash
ng add @nguniversal/express-engine --clientProject <PROJECT-NAME>
```


Add Transloco to your project by using schematics:


``` bash
ng add @ngneat/transloco
```


Choose your supported languages, and answer `Yes` for the SSR question. Now you can see that it created the translation files, the loader, and added everyhing it needs to the `AppModule`.

When using Angular SSR, we need to change our loader base path to be absolute instead of relative, for it to work. This is already done for you.

The only thing you need to do is modify the new `baseUrl` property in each one of the `environment` files based on your application:

```ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200' <====
};

// environment.prod.ts
export const environment = {
  production: true,
  baseUrl: 'http://localhost:4000' <====
};
```


Now let's add a new key to our translation files:

```json
{
  "title": "Angular SSR with Transloco english"
}
```

And let's use it in our template:
```html
<ng-template transloco let-t>
  {{ t.title }}
</ng-template>
```

Let's build our application for production using the following commands:

```
npm run build:ssr
npm run serve:ssr
```

Open your browser and navigate to `http://localhost:4000` and Viola! We did it!

Let's see the source HTML file:
image

We have got a working application with SSR and internalization (i18n) support in 5 minutes.


## Bonus
We can use the `accept-language` header to set the preferred user language automatically. The Accept-Language request HTTP header advertises which languages the client can understand, and which locale variant is preferred.

```ts
import { Component, Inject, Optional } from '@angular/core';
import { Request } from 'express';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { TranslocoService } from '@ngneat/transloco';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Optional() @Inject(REQUEST) private request: Request, private translocoService: TranslocoService) {
    if (request.headers) {
      translocoService.setActiveLang(normalize(request.headers['accept-language']));
    }
  }
}
```

The `accept-language` headers return the following string:

```
  'accept-language': 'en-US,en;q=0.9,he;q=0.8,ru;q=0.7,fr;q=0.6,pt;q=0.5',
```

You need to extract the language and set it as active.

***

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)