Setting up dynamic language switch

[loxy]

Hi,

I cannot setup dynamic language switching like described here: https://taiga-ui.dev/i18n/Dynamic_loader

I copied the dynamic loading to our app module. But when changing via this.switcher.setLanguage('english') I get:

ERROR Error: Cannot find module './english'
    at .*$ chunkName: i18n-lazy- namespace object:1366:1

In this chunk I've found several entries like this (here only english):

// ...
"./english/addon-commerce.d": [
	4699,
	7,
	"i18n-lazy-42"
],
"./english/addon-commerce.d.ts": [
	4699,
	7,
	"i18n-lazy-42"
],
"./english/addon-editor.d": [
	1870,
	7,
	"i18n-lazy-44"
],
"./english/addon-editor.d.ts": [
	1870,
	7,
	"i18n-lazy-44"
],
"./english/addon-preview.d": [
	3976,
	7,
	"i18n-lazy-46"
],
"./english/addon-preview.d.ts": [
	3976,
	7,
	"i18n-lazy-46"
],
"./english/addon-table.d": [
	6475,
	7,
	"i18n-lazy-48"
],
"./english/addon-table.d.ts": [
	6475,
	7,
	"i18n-lazy-48"
],
"./english/core.d": [
	9147,
	7,
	"i18n-lazy-50"
],
"./english/core.d.ts": [
	9147,
	7,
	"i18n-lazy-50"
],
"./english/countries.d": [
	4312,
	7,
	"i18n-lazy-52"
],
"./english/countries.d.ts": [
	4312,
	7,
	"i18n-lazy-52"
],
"./english/english.d": [
	5875,
	7,
	"i18n-lazy-54"
],
"./english/english.d.ts": [
	5875,
	7,
	"i18n-lazy-54"
],
"./english/index.d": [
	7658,
	7,
	"i18n-lazy-56"
],
"./english/index.d.ts": [
	7658,
	7,
	"i18n-lazy-56"
],
"./english/kit.d": [
	6678,
	7,
	"i18n-lazy-58"
],
"./english/kit.d.ts": [
	6678,
	7,
	"i18n-lazy-58"
],
"./english/package.json": [
	6223,
	3,
	"i18n-lazy-60"
],
"./english/taiga-ui-i18n-languages-english.d": [
	5794,
	7,
	"i18n-lazy-61"
],
"./english/taiga-ui-i18n-languages-english.d.ts": [
	5794,
	7,
	"i18n-lazy-61"
],
// ...

Changing the dynamic loading to something like this:

@NgModule({
  providers: [
    tuiLanguageSwitcher(
      async (language: TuiLanguageName): Promise<unknown> =>
        import(
          /* webpackMode: "lazy" */
          /* webpackChunkName: "i18n-lazy-" */
          `@taiga-ui/i18n/languages/${language}/index.d`
          // also you can override the paths to your i18n language files
        ),
    ),
  ],
})
export class AppModule {}

solves this webpack issue but leads to

2i18n-lazy-2.js:1 ERROR TypeError: Cannot read properties of undefined (reading 'dateTexts')
    at taiga-ui-i18n-tools.js:7:157
    at map.js:7:37
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at subscribe.innerSubscriber (switchMap.js:14:144)
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    at map.js:7:24
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)
    ...

Can you elaborate more on how this should work or being set up? I'm lost and didn't found any hints in code base...

I'm on Taiga UI 3.8.0 and Angular 14

Best regards,
Kersten

[splincode]

Could you provide an example on stackblitz and convert to issue?

[loxy]

Issue created: #2991

[loxy]

Tried to create a Stackblitz but I get other problems, maybe same root cause?

Error: Uncaught (in promise): Error: Module @taiga-ui/i18n/languages/english not declared as a System.registerDynamic dependency of https://angular-yy3hwd.stackblitz.io/~/src/app/app.module.ts
Error: Module @taiga-ui/i18n/languages/english not declared as a System.registerDynamic dependency of https://angular-yy3hwd.stackblitz.io/~/src/app/app.module.ts
at ...

See here: https://stackblitz.com/edit/angular-yy3hwd

[waterplea]

StackBlitz might have it's own issues, maybe you have a small repo in Github?

[loxy]

Yes, see #2991

Spoiler: https://github.com/loxy/tui-dynamic-lang