使用 ngx-translate 翻译 Angular

Question

**Hello, I install ngx-translate, and i add import { defaultLanguage } from './../assets/i18n/en.json'; in app.component.ts and the error is :

"Cannot find module './../assets/i18n/en.json'. Consider using '--resolveJsonModule' to import module with '.json' extension", But I have the folder and file with this name. What is need to do? I'm beginer in the Angular.

Answer 1

It is irrelevant whether you are a beginner or not, because one is an external Angular library, not a Core Angular specific topic.

If you read the documentation, it says that you are downloading the json files with an http request and loading it. So You have to a server where you can store them.

I share with you, how you can "inject" i18n without any http request. So it will build into your source code.

// @ symbol mean is this folder not angular module. So it is just natural folder.
import { I18N_JAPAN } from './@i18n/jp';
import { I18N_ENGLISH } from './@i18n/en';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        // ...
        TranslateModule.forRoot(), // <-- need
        // ...
    ],
    providers: [ /* ... */],
    bootstrap: [AppComponent],
})
export class AppModule {
    constructor(translateService: TranslateService) {
        translateService.setTranslation('jp', I18N_JAPAN); <-- you can add directly
        translateService.setTranslation('en', I18N_ENGLISH); <-- you can add directly
        translateService.setDefaultLang('en');
        translateService.use(translateService.getBrowserLang());
    }
}

export const I18N_ENGLISH = {
    'my-i18n': {
        path: {
            to: 'display text'
        }
    }
}

And use:

• in html: {{ 'my-i18n.path.to' | translate }} {{ 'my-i18n.path.to' | translate }}
• in TS: translateService.instant('my-i18n.path.to')

In documentation: https://github.com/ngx-translate/core

Configuration

By default, there is no loader available. You can add translations manually using setTranslation but it is better to use a loader. You can write your own loader, or import an existing one. For example you can use the TranslateHttpLoader that will load translations from files using HttpClient.