JSON-файлы не загружаются в ng2-translate с помощью веб-пакета

Я пытаюсь реализовать ng2-translate i18n.

dashboard.component.ts

import { Component } from '@angular/core';
import {TranslateService} from 'ng2-translate';
@Component({
    selector: 'dashboard-page',
    template:`<div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
    </div>`
    
})

export class DashboardComponent {
    constructor(private translate: TranslateService) {
        translate.addLangs(["en", "fr"]);
        translate.setDefaultLang('en');

        let browserLang = translate.getBrowserLang();
        translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    }
}

Путь к этому файлу: src / main / app / dashboard / dashboard.component.ts

Путь к 2 JSON-файлам - en.json & fr.json - это src / main / app / assets / i18n.

Я включил TranslateModule в app.module.ts

Но когда я запускаю приложение, я получаю ошибку en.json file not found-404. Я использую webpack и в webpack.common.js у меня есть preloader для JSON, как это

preLoaders:[
    {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: 'json-loader'
    }
]

Тем не менее я получаю JSON файл не найдена ошибка.

И из примеров, которые я использовал, я не понимаю, в каком файле должен быть указан путь assests\i18n.json.

Источник

1 ответ

Решение

Я столкнулся с этой же проблемой. В веб-пакете содержатся только файлы, требующие редактирования, поэтому, если нет необходимости ('./path/to/file.json'), файл не включается. Более того, это будет означать, что файл также станет хэшированным, и, следовательно, файл не будет распознан утилитой ng2-translate.

Я решил эту проблему с помощью CopyWebpackPlugin (см. https://github.com/kevlened/copy-webpack-plugin), добавив следующую конфигурацию в мой файл webpack.config.js

 var CopyWebpackPlugin = require('copy-webpack-plugin');

 ...

 plugins: [
     new CopyWebpackPlugin([ { from: 'src/assets/i18n', to: 'assets/i18n' } ])
 ]

Я также настроил модуль Translate следующим образом, потому что мои ресурсы были найдены в папке /assets/i18n, а не в папке по умолчанию / i18n.

В app.translate.ts (обратите внимание на экспорт функции, это требуется для AoT)

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

export const AppTranslateModule: ModuleWithProviders = TranslateModule.forRoot({
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [ Http ]
});

И в моем app.module.ts следующим образом

@NgModule({
    imports: [ AppTranslateModule, ... ],
    ...
})
export class AppModule {
}

Примечание. На момент написания статьи пример веб-пакета ng2-translate не работает. На самом деле существует проблема, открытая для этого https://github.com/ocombe/ng2-translate/issues/325

Источник

+ Изменить

new CopyWebpackPlugin([ { from: 'src/assets/i18n', to: 'assets/i18n' } ])

к

new CopyWebpackPlugin({ patterns: [ { from: './src/assets/i18n', to: 'assets/i18n' } ] }),
Источник
Другие вопросы по тегам