ngx-translate: неправильный путь сборки языка

Недавно я обновил все свои зависимости (обновление пряжи --latest).

Для перевода я использую @ngx-translate. Теперь, когда я создаю свой проект (yarn run webpack: build), он добавляет языковые файлы в неправильную папку, и я получаю 404 и, следовательно, никаких переводов.

Желаемая структура должна быть: /target/www/i18n/de.json

Текущая структура папок: /target/www/target/www/i18n/de.json

Теперь мое предположение: видимо, ошибка при установке пути (дополнительно ./ или что-то в этом роде).

Мой вопрос: где я могу указать путь, куда поместить скомпилированный язык?

Мой package.json выглядит так (только часть зависимостей):

"dependencies": {
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/router": "4.4.6",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
    "@types/jquery": "^3.2.12",
    "@types/webpack-env": "^1.13.1",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.5.1",
    "cryptocoins-icons": "^2.5.0",
    "font-awesome": "4.7.0",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "moment": "^2.18.1",
    "ng-jhipster": "0.2.12",
    "ng2-nouislider": "^1.7.0",
    "ng2-nvd3": "^2.0.0",
    "ng2-webstorage": "1.8.0",
    "ngx-cookie": "1.0.1",
    "ngx-infinite-scroll": "0.6.1",
    "ngx-ui-switch": "^1.4.4",
    "nouislider": "^10.1.0",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.5.2",
    "sockjs-client": "1.1.4",
    "swagger-ui": "3.4.2",
    "tether": "1.4.0",
    "webstomp-client": "1.2.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "1.4.9",
    "@angular/compiler-cli": "4.4.6",
    "@types/jasmine": "2.6.2",
    "@types/node": "8.0.47",
    "add-asset-html-webpack-plugin": "2.1.2",
    "angular2-template-loader": "0.6.2",
    "awesome-typescript-loader": "3.3.0",
    "browser-sync": "2.18.13",
    "browser-sync-webpack-plugin": "1.2.0",
    "codelyzer": "3.2.2",
    "copy-webpack-plugin": "4.2.0",
    "css-loader": "0.28.7",
    "del": "3.0.0",
    "event-stream": "3.3.4",
    "exports-loader": "0.6.4",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "generator-jhipster": "4.10.2",
    "html-loader": "0.5.1",
    "html-webpack-plugin": "2.30.1",
    "jasmine-core": "2.8.0",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage": "1.1.1",
    "karma-intl-shim": "1.0.3",
    "karma-jasmine": "1.1.0",
    "karma-junit-reporter": "1.2.0",
    "karma-notify-reporter": "1.0.1",
    "karma-phantomjs-launcher": "1.0.4",
    "karma-remap-istanbul": "0.6.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.5",
    "lazypipe": "1.0.1",
    "lodash": "4.17.4",
    "map-stream": "0.0.7",
    "merge-jsons-webpack-plugin": "1.0.12",
    "node-sass": "4.5.3",
    "phantomjs-prebuilt": "2.1.15",
    "postcss-loader": "2.0.8",
    "proxy-middleware": "0.15.0",
    "rimraf": "2.6.2",
    "run-sequence": "2.2.0",
    "sass-loader": "6.0.6",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "string-replace-webpack-plugin": "0.1.3",
    "style-loader": "0.19.0",
    "to-string-loader": "1.1.5",
    "tslint": "5.8.0",
    "tslint-loader": "3.5.3",
    "typescript": "2.3.4",
    "web-app-manifest-loader": "0.1.1",
    "webpack": "3.8.1",
    "webpack-dev-server": "2.9.3",
    "webpack-merge": "4.1.0",
    "webpack-notifier": "1.5.0",
    "webpack-visualizer-plugin": "0.1.11",
    "write-file-webpack-plugin": "4.2.0",
    "xml2js": "0.4.19",
    "yargs": "10.0.3"
  },

webpack angular angular-cli jhipster ngx-translate
person dave0688    schedule 01.11.2017    source источник
comment
Это то, что вы ищите? github.com/ jhipster/jhipster-sample-app-ng2/blob/   -  person Jon Ruddell    schedule 02.11.2017
comment
Это именно то, что я ищу, спасибо за хин! :) Однако я ничего не менял в этом файле и не обновлял веб-пакет. Любая идея, откуда могло взяться это несоответствие в путях? Странная вещь: путь к шаблону работает, как и ожидалось, но только путь к файлу по какой-то причине не...   -  person dave0688    schedule 02.11.2017
comment
Хорошо, я часами гуглил любую ошибку, но ничего не нашел ... В конце концов я нашел решение, которое до смущения простое: я изменил свойство fileName, чтобы начать с ../.. и тогда это работает: D   -  person dave0688    schedule 02.11.2017

Ответы (3)


arrow_upward
2
arrow_downward

Во-первых, я не вижу никаких @ngx-translate пакетов, установленных в вашем package.json

Вот как я это исправил:

  1. yarn install и @ngx-translate/core, и @ngx-translate/http-loader

  2. Затем вам нужно определить метод HttpLoaderFactory. Для начала поместите его в свой корневой модуль (вероятно, с именем app.module.ts). Не забудьте сначала импортировать модули, которые вы только что установили:

import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader';

Затем вы можете изменить расположение файлов перевода.

export function HttpLoaderFactory(http: Http) { return new TranslateHttpLoader( http, '../target/www/i18n/', // or whatever path you're using '.json' ); }

Это должно заставить вас начать. В файле readme есть несколько полезных примеров, если вы застряли... https://github.com/ngx-translate/core/blob/master/README.md

person Faisal    schedule 01.11.2017
comment
Спасибо за ваш ответ. Однако в моем проекте все уже настроено. Правильно, что в моем package.json нет ngx-translate, потому что это происходит из-за зависимости от jhipster (надо было упомянуть об этом, извините). У вас есть другая идея, что может быть не так? Он работал до того, как я обновил свои зависимости. - person dave0688; 02.11.2017
comment
Трудно сказать, не видя вашего HttpLoader, так как там будет указан путь... - person Faisal; 02.11.2017

arrow_upward
1
arrow_downward

Только для тех, кто наткнулся на ту же проблему: после нескольких часов гугления я не нашел причину этого изменения. Однако мне удалось решить эту проблему, изменив следующие строки в webpack.common.js:

    new MergeJsonWebpackPlugin({
        output: {
            groupBy: [
                { pattern: "./src/main/webapp/i18n/en/*.json", fileName: "./i18n/en.json" },
                { pattern: "./src/main/webapp/i18n/fr/*.json", fileName: "./i18n/fr.json" }
                // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array
            ]
        }
    }),

to: 

    new MergeJsonWebpackPlugin({
        output: {
            groupBy: [
                { pattern: "./src/main/webapp/i18n/en/*.json", fileName: "../../i18n/en.json" },
                { pattern: "./src/main/webapp/i18n/fr/*.json", fileName: "../../i18n/fr.json" }
                // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array
            ]
        }
    }),

(Обратите внимание на путь в fileName).

Надеюсь, я смогу избавить кого-то от борьбы с поиском ошибки;)

person dave0688    schedule 02.11.2017

arrow_upward
0
arrow_downward

Я нашел решение для него. Насколько я понимаю, вы используете jhipster. Этот фрагмент кода протестирован в jhipster. Просто включите этот код в app.module.ts (он не должен оставаться в app.module.ts). Это якобы оптимизация в ng-jhispter.

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, '/app/i18n/');
}

NgModule({
    declarations: [...],
    imports: [
        ...
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ],

    // The component that loads
        bootstrap: [AppMainComponent]
})
export class AppModule {
}
person json singh    schedule 30.08.2018