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.

Note

Learn more in the internationalization concept.

Use the language parameter

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

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 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

Internationalization in Angular