ngx-translate:语言构建路径错误 [英] ngx-translate: language build path wrong

问题描述

我最近更新了所有依赖项(yarn upgrade --latest).

I recently updated all my dependencies (yarn upgrade --latest).

对于翻译，我使用@ngx-translate.现在，当我构建我的项目 (yarn run webpack:build) 时，它会将语言文件添加到错误的文件夹中，我得到 404，因此没有翻译.

For translation I use @ngx-translate. Now, when I build my project (yarn run webpack:build) it adds the language files to the wrong folder and I get a 404 and therefore no translations.

所需的结构应该是:/target/www/i18n/de.json

当前文件夹结构为:/target/www/target/www/i18n/de.json

现在我的猜测:设置路径时显然有错误(附加 ./或类似的东西).

Now my guess: There's apparently an error when setting the path (additional ./ or something like that).

我的问题是:在哪里可以设置编译语言的路径?

My question is: Where can I set the path where to put the compiled language in?

我的 package.json 看起来像这样(只是依赖部分):

My package.json looks like this (jus the dependencies part):

"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.common.js 中的以下几行来解决它:

Just for anyone who stumbles upon the same problem: After hours of googling I didn't find the reason for that change. However, I was able to solve it by changing the following lines in 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
            ]
        }
    }),

到:

    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中的路径).

希望我可以挽救某人在寻找错误时的挣扎;)

Hope I can save someone the struggle I had with searching for the bug ;)

这篇关于ngx-translate:语言构建路径错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！