Ionic 7 Multilanguage App without app.modules.ts

Ionic Framework
1

Hi everyone,
In my old app (<= v6), I used standard configuration for ngx-translate dependency but in ionic 7 src/app/app.modules.ts file is not present. How works in ionic7?

In my old apps:

npm install @ngx-translate/core
npm install @ngx-translate/http-loader

In src/app/app.modules.ts add these imports:

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

Load TranslateHttpLoader from the JSON files

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

Add TranslateModule to the @NgModule imports block:

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  ...
})

Help me please

2

Does this help you? NgxTranslate Support for Standalone? · Issue #1398 · ngx-translate/core · GitHub

1 Like
3

Add providers in main.ts

importProvidersFrom(TranslateModule.forRoot(
      {
        loader: {
            provide: TranslateLoader,
            useFactory: createTranslateLoader,
            deps: [HttpClient]
          }
        }
    )),

details ///Ionic 7 : Create a multi language Ionic application with ngx-translate - YouTube