ngx-translate: language build path wrong

Question

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

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.

The desired structure should be: /target/www/i18n/de.json

The current folder structure is: /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?

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"
  },

Answer 1

I found the solution for it. As i understand you are using jhipster.This snippet is tested in jhipster. Just include this code in app.module.ts( it shouldn't stay in the app.module.ts). This is supposedly an optimization in 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

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
            ]
        }
    }),

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
            ]
        }
    }),

(Please note the path in fileName).

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

Answer 3

First off, I don't see any @ngx-translate packages installed in your package.json

Here's how I'd fix it:

1. yarn install both @ngx-translate/core and @ngx-translate/http-loader

2. Then you'll need to define an HttpLoaderFactory method. For the sake of getting started, put it in your root module (probably named app.module.ts). Remember to first import the modules you just installed:

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

Then you can can edit the location of your translation files.

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

That should get you started. The readme has some helpful examples if you get stuck... https://github.com/ngx-translate/core/blob/master/README.md