ngx-translate：语言构建路径错误

Question

我最近更新了所有依赖项（yarn upgrade --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"
  },

Answer 1

我找到了解决方案。据我了解，您正在使用 jhipster。此 sn-p 在 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 {
}

Answer 2

仅适用于遇到相同问题的任何人： 经过数小时的谷歌搜索，我没有找到改变的原因。但是，我能够通过更改 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
            ]
        }
    }),

（请注意文件名中的路径）。

希望我能拯救别人在寻找错误时遇到的困难；）

Answer 3

首先，我没有看到您的package.json 中安装了任何@ngx-translate 软件包

这是我的解决方法：

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' ); }

这应该可以帮助您入门。如果您遇到困难，自述文件中有一些有用的示例...https://github.com/ngx-translate/core/blob/master/README.md