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.

Tip

To learn more, check the Internationalization concept.

Use the language parameter

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

src/app/app.routes.ts

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

Internationalization in Angular