有没有办法在Angular 2中的.pug文件中使用i18n

Question

I have tried to add i18n in Angular 2 project in .pug files. The "./node_modules/.bin/ng-xi18n" command fails with "can't resolve module @angular/core/src/di/metadata from "..\\index.ts"". Is there a way to use i18n localization and .pug or the html is the only solution for now? Thanks.

Answer 1

Yes, using angular/cli + ngx-translate + pug-cli will do the work.

First, set up your TranslationConfigModule . Create a new module called translation.config.module.ts

import { HttpModule, Http } from '@angular/http';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { TranslateModule, TranslateLoader, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

const translationOptions = {
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http]
    }
};    

@NgModule({
    imports: [TranslateModule.forRoot(translationOptions)],
    exports: [TranslateModule],
    providers: [TranslateService]
})
export class TranslationConfigModule {

   /**
     * @param translate {TranslateService}
     */
     constructor(private translate: TranslateService) {
        // Setting up Translations
        translate.addLangs(['en', 'it']);
        translate.setDefaultLang('en');
        const browserLang = translate.getBrowserLang();
        // English and Italian, just an example
        translate.use(browserLang.match(/en|it/) ? browserLang : 'it');
    }
}

Then, import it in whatever module you want,eg app.module.ts

. . . 

import { TranslationConfigModule } from '../shared/modules/translation.config.module';

. . . 

@NgModule({
    declarations: [ ],
    imports: [
        TranslationConfigModule
    ],
    exports: [ ]
})

Now, you need to build some i18n.json s in myapp/src/assets/i18n . EG en.json that will contain:

{
    "TEST" : {
        "TITLE" : "Herro Pug!"
    }
}

Now set up pug integration following the steps on this answer of mine Use Jade as angular2 template engine .

Now enjoy your pug templates with i18n. Of course you can use this translation module only on the components declared and exported in a module where you are importing this one.

test.pug

h3 {{ 'TEST.TITLE' | translate }}