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

Пытаюсь реализовать 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

Путь к двум файлам JSON - en.json и fr.json - src / main / app / assets / i18n.

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

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

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

Тем не менее я получаю ошибку JSON file not found.

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


javascript json angular internationalization ng2-translate
person Protagonist    schedule 16.11.2016    source источник
comment
1-й: проверьте, скопируйте ли файл в нужное место, если нет, проверьте, где он находится в источниках и сети в инструментах разработки браузера. Если он вызывает файл, и вы получаете 404, это означает, что ng2-translate работает нормально, просто нужно исправить процесс сборки (или изменить путь). 2-й: ng2-translate использует чистые каналы, это очень плохая идея в angular2 (вы можете попробовать, например, angular2localization)   -  person Michał Ignaszewski    schedule 16.11.2016
comment
@ MichałIgnaszewski Ок. Но где я могу указать путь к файлу Assests \ i18n * .json?   -  person Protagonist    schedule 16.11.2016

Ответы (2)


arrow_upward
4
arrow_downward

Я столкнулся с такой же проблемой. Webpack включает только файлы, которые являются 'require', поэтому, если нет require ('./ 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

person JeanPaul A.    schedule 07.12.2016

arrow_upward
0
arrow_downward

Изменять

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

to

new CopyWebpackPlugin({ patterns: [ { from: './src/assets/i18n', to: 'assets/i18n' } ] }),
person Tiago Corrêa    schedule 23.07.2020