ngx-translate: language build path wrong

ngx-translate in ts file
en.json angular
ngx-translate change language dynamically
ngx-translate instant

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

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

Can not find .json path containing languages · Issue #665 · ngx , Can not find .json path containing languages #665. Closed ngx-translate version: 8.0.0. Angular version: So somehow the path is wrong. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

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

/assets/i18n/en.json NOT FOUND · Issue #853 · ngx-translate/core , to host and review code, manage projects, and build software together. Webpack and ngx-translate versions are as follows: adding the i18n directory to the assets list in angular-cli.json, and But the Error isn't disappear -​language-files-are-not-found-ngx-translate-angular-cli/51121032#51121032  To implement ngx-translate in a multilanguage app using angular universal, ngx-translate has to be initialized on the server side (using for example the request lang) and on the client side (using the browser language). This result is the following glitchy side effect: The server initialize ngx-translate and render the page

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 {
}

ngx-translate: language build path wrong - angular - html, 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​  if you can use the official implementation, then use that, it's more performant, the limitation is that it's limited to what is offered whereas with ngx translate you can always extend it via plugins, or even fork it if necessary.

How to translate your Angular 8 app with ngx-translate, to set up ngx-translate. Optional: Create a Angular 8 demo project The @ngx​-translate/core contains the core routines for the translation: The TranslateService and some pipes. Reloading the app now shows an error in the browser console: Failed to Now drag & drop your assets/i18n-folder onto the main window. After a new language has been selected, I used onLangChange to update the language. However, onLangChange is triggered multiple times from a single translate.use call. This translate.use is called from the provider Localization , and is called from a modal named locale.ts . onLangChange is called from one of the main screen, i.e settings.ts .

@ngx-translate/core, Need private packages and team management tools?Check out npm Teams ». @ngx-translate/core. 12.1.2 • Public • Published 2 months ago. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

How to Localize Ionic Applications with ngx-translate, How to create a Ionic 4 app; Integrating the ngx-translate module into is done, you should be able to cd into the Translation directory and run: The last and most pleasant step is the use of @ngx-translate with typing in the component that you want to inject multi-language texts. It is necessary to inject the translations service, which must be public to be able to interact with the template.

Comments
  • Is this what you are looking for? github.com/jhipster/jhipster-sample-app-ng2/blob/…
  • This is exactly what I'm looking for, thanks for the hin! :) However, I haven't changed anything in this file, nor have I upgraded webpack. Any idea where that mismatch in pathes could come from? The strange thing is: the pattern-path works as expected, but only the "fileName" path doesn't for some reason...
  • Okey, I googled for hours for any bug but found nothing... In the end I found the solution, which is embarrasingly easy: I changed the "fileName" property to begin with "../.." and then it works :D
  • Thanks for your reply. However, in my project there’s everything already set up. Its right that there’s no ngx-translate in my package.json, because that’s coming over a dependency of jhipster (should have mentioned that, sorry). Do you have any other idea what could be wrong? It has been working before I updated my dependencies.
  • Hard to tell without seeing your HttpLoader, as that's where the path will be specified...