---
title: Internationalization in Angular
description: Learn how to set up internationalization using field-level translation in your Angular project.
url: https://www.storyblok.com/docs/quickstarts/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.
-   Open each article, select the Spanish language, and provide translated content. You can also use [AI Translations](https://www.storyblok.com/docs/manuals/translations#generate-ai-translations).

> [!TIP]
> To learn more, check the [Internationalization concept](/docs/concepts/internationalization).

## Use the language parameter

To support language paths, update the `src/app/app.routes.ts` file:

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 requests that path. For example, the Spanish version of `articles/example-article` becomes `es/articles/example-article`.

In the example code, the resolver checks the first URL segment. If it matches a supported language, the resolver removes the segment from the slug, and passes the `language` parameter the API client that fetches the translated content.

If the first segment isn’t a supported language, the resolver uses the full URL as the slug. It doesn’t pass a `language` parameter and 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/quickstarts/angular/content-modeling)
-   [Next: Integrate Vue with Storyblok](/docs/quickstarts/vue)