(Feature Request) Dynamic Language Swapping in AoT Builds [i18n]

[colinskow]

Most multilingual apps allow the user to dynamically change the language at runtime without restarting or interrupting the state of the app.

I would like to have the performance benefits of AoT but include multiple languages in the same build and let the user switch between them at runtime. I don't want to have to distribute a separate version of the code for every single language supported.

There are solutions like Angular2Localization that work this way but they aren't quite as powerful as Angular's official solution.

[Thommas]

ng2-translate does this. Not sure about AOT support. Stick to it if you need to change language at runtime. This extra feature is bad in terms of performance but it's the only way it can be at runtime.

There was already a debate about native i18n implementation requiring the user to reload the page to load a different app because all templates are compiled in another language. Don't use it if you want runtime language switch.

[vicb]

The current Angular impl does not allow this because you can change the DOM structure by translating html and it would invalidate the compiled view.

We will allow translating strings in the TypeScript source files mid-term. When this will be implemented it will be possible to support runtime language switching if the only TS sources are translated (vs templates). I'm not yet sure if this is something we will implement (vs the community) but the architecture will allow it. (it might also be possible to support a subset of the construct in the templates - ie text only, no HTML).

[dietergeerts]

@vicb , I was battling the same, but did dive deeper, and we decided on our project to have the mix of i18n Angular provides and the ngx-translate. We only load 1 language, and if the user changes it, we need to 'reload' the whole route/app. The problem is now: how to do this in a good way without reloading the browser?

I stated route/app, because the first resolve we do is the i18n configuration, which also loads the translations. It would be perfect if the router could reload, but that's not the case.

I tried to bootstrap again after destroying the root component/module and the platform, but although they work, I keep getting zone errors, which I don't want.

In the official docs, there isn't any way stated on how to implement a language switcher in the app, that will eventually reboot the application, so the correct language can be loaded.

So what's the best way of doing this?

[Neeraj2610]

@dietergeerts - how did u switch to different language

[dietergeerts]

@Neeraj2610 ,
When you choose the language in the language switcher, we set it in local storage and reboot the application:

    private _changeLanguage(language: string): void {
        if (language !== this._i18n.currentLanguage) {
            localStorage.setItem(this._defaultLocaleKey, language);
            APPLICATION.refresh();
        }
    }

The refresh is declared in our main file lke this:

declare const PROD_MODE: boolean;
import 'zone.js';

import 'reflect-metadata';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';
import { APPLICATION } from './app.reference';
import { noop, once } from 'lodash';
import { enableProdMode } from '@angular/core';

require.ensure(['moment/locale/nl', 'moment/locale/fr', 'moment/locale/en-gb'], noop, 'locale');

// TODO Find a better solution by refreshing the route through the router, which isn't possible yet in Angular.
// OR find a way that will lead to a smaller flash on the page, though it's very minimal now already.
// Asked some advice: https://github.com/angular/angular/issues/13905

(() => {
    const enableProdModeOnce = once(() => enableProdMode());
    bootstrap();

    function bootstrap(): void {
        let platform = platformBrowserDynamic();
        if (PROD_MODE) {
            enableProdModeOnce();
        }
        platform.bootstrapModule(AppModule);
        APPLICATION.refresh = () => {
            platform.destroy();
            bootstrap();
            // TODO: Get rid of error: `Expected to not be in Angular Zone, but it is!`
            // Which happens when we bootstrap again!
        };
    }
})();

This code is from a year ago, so maybe there are better solutions now.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}