---
title: Internationalization in Angular
description: Discover Storyblok's documentation with comprehensive developer guides, user manuals, API references, and examples to help you get the most out of the headless CMS platform.
url: https://storyblok.com/docs/guides/angular/internationalization
---

# Internationalization in Angular

Learn how to create a basic implementation of field-level translation in an Angular project.

## Setup

In your space, open **Settings** → **Internationalization** → **Languages** and add `es` (Spanish).

-   In the article content type block schema, set the `title` and `content` fields as translatable.
-   Go to each article, select the Spanish language, and provide translated content. You can also use [AI Translations](https://www.storyblok.com/docs/editor-guides/ai-translations).

> [!NOTE]
> Learn more in the [internationalization concept](/docs/concepts/internationalization).

## Use the language parameter

Update the `src/app/app.routes.ts` file to support language paths.

src/app/app.routes.ts

```typescript
import { inject } from '@angular/core';
import { ActivatedRouteSnapshot, Routes } from '@angular/router';
import { StoryblokService } from '@storyblok/angular';

export const routes: Routes = [
  {
    path: '**',
    loadComponent: () =>
      import('./routes/catch-all/catch-all.component').then((m) => m.CatchAllComponent),
    resolve: {
      story: async (route: ActivatedRouteSnapshot) => {
        const supportedLanguages = ['es'];
        const segments = route.url.map((s) => s.path);
        const lang = segments.length > 0 && supportedLanguages.includes(segments[0]) ? segments[0] : undefined;
        const slug = (lang ? segments.slice(1) : segments).join('/') || 'home';

        const client = inject(StoryblokService).getClient();
        const query: Record<string, string> = {
          version: 'draft',
          resolve_relations: 'featured-articles.articles',
        };
        if (lang) {
          query['language'] = lang;
        }
        const { data } = await client.stories.get(slug, { query });
        return data?.story;
      },
    },
  }
];
```

The array `supportedLanguages` contains the language codes configured in the Storyblok space.

The language code is the first part of the `full_slug` of each language-specific story version, and the Visual Editor is configured to request that path. For example, the Spanish version of `articles/example-article` would be `es/articles/example-article`.

In the example code, the resolver checks the first URL segment to see if it matches a supported language. If it does, the segment is removed from the slug, and the `language` parameter is passed to the Storyblok API client to fetch the translated content.

If the first segment is not a supported language, the resolver uses the full URL as the slug and does not pass a `language` parameter, which fetches content for the default language.

> [!NOTE]
> Note that this approach works for all stories except the home story, if it is defined as the root. Internationalization is highly implementation-specific, and how to handle the home story as well as other aspects is dependent on the exact project requirements.

## Related Resources

[Concept: Internationalization](/docs/concepts/internationalization)

[Internationalization in Angular](https://angular.dev/guide/i18n)

  

## Pagination

-   [Previous: Content Modeling in Angular](/docs/guides/angular/content-modeling)