Есть ли способ использовать i18n в .pug-файлах в Angular 2

Question

Я попытался добавить i18n в проект Angular 2 в .pug-файлах. Команда «./node_modules/.bin/ng-xi18n» терпит неудачу с «не может разрешить модуль @ angular/core/src/di/metadata из« .. \ index.ts »». Есть ли способ использовать локализацию i18n и .pug или html - единственное решение? Благодарю.

Answer 1

Да, используя angular/cli + ngx-translate + pug-cli будет выполнять работу.

Сначала настройте TranslationConfigModule. Создайте новый модуль под названием 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'); 
    } 
} 

Затем импортировать его в любой модуль, который вы хотите, например. app.module.ts

. . . 

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

. . . 

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

Теперь вам нужно построить несколько i18n.json с в myapp/src/assets/i18n. E.G. en.json, который будет содержать:

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

Теперь установите мопс интеграции следующих шагов на этом мой ответ Use Jade as angular2 template engine.

Теперь наслаждайтесь мобными шаблонами с i18n. Конечно, вы можете использовать этот модуль перевода только для компонентов, объявленных и экспортированных в модуле, в котором вы импортируете этот.

test.pug

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