auto updating of main translation entries in Nx project does not work

[julianpoemp]

I would like to use transloco-keys-manager in my angular projects. Each of the projects is a Nx mono repository. The problem: the auto-generation of translation entries doesn't work as expected: Only after a call of npm start the translation files are updated, but not while development. I followed the instructions and installed the package as follows:

(I created a minimal project for easier reproduction of this issue: https://github.com/julianpoemp/nx-transloco-keys-manager)

1. nx add @ngneat/transloco with defaults.
2. nx g @ngneat/transloco:keys-manager with option "both".
3. I changed the webpack-dev.config.js as follows:

const {TranslocoExtractKeysWebpackPlugin} = require('@ngneat/transloco-keys-manager');

module.exports = {
  plugins: [new TranslocoExtractKeysWebpackPlugin({
    rootTranslationsPath: "apps/nx-transloco-keys-manager/src/assets/i18n",
    "add-missing-keys": true,
    scopePathMap: {
      general: "apps/nx-transloco-keys-manager/src/assets/i18n/general"
    }
  })]
};

4. I changed the start script to "start": "nx serve --extra-webpack-config webpack-dev.config.js", because we're using Nx.
5. I replaced the app.component.html as follows:

<div *transloco="let t;">
 {{t("general.test9")}}
  {{t("test.test4")}}
  {{t("test4")}}
  {{t("test5")}}
  {{t("test6")}}
  {{t("test7")}}
</div>

6. I changed transloco-root-module.tsas follows:

import { HttpClient } from '@angular/common/http';
import {
  TRANSLOCO_LOADER,
  Translation,
  TranslocoLoader,
  TRANSLOCO_CONFIG,
  translocoConfig,
  TranslocoModule, TRANSLOCO_SCOPE
} from '@ngneat/transloco';
import { Injectable, NgModule } from '@angular/core';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
  constructor(private http: HttpClient) {}

  getTranslation(lang: string) {
    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
  }
}

@NgModule({
  exports: [ TranslocoModule ],
  providers: [
    {
      provide: TRANSLOCO_CONFIG,
      useValue: translocoConfig({
        availableLangs: ['en', 'es'],
        defaultLang: 'en',
        // Remove this option if your application doesn't support changing language in runtime.
        reRenderOnLangChange: true,
        prodMode: environment.production,
      })
    },
    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader },
    { provide: TRANSLOCO_SCOPE,
      useValue: "general"
    },
  ]
})
export class TranslocoRootModule {}

6. I run npm startand checked if "test" was added to en.json and es.json. Yes it worked. If I added more t() calls to the html file while nx serve is still running, the new keys are not added during run time. Only right after running npm startagain.
7. Only the translation files that reference to the generalscope are updated automatically.

Expected behaviour

As far as I understand, the "main" translation files (outside the scope) should be updated automatically, too.

How can I solve this?

[azenyem]

I do not use nx, but it does not work for me, either. But if I change the file node_modules/@ngneat/transloco-keys-manager/webpack-plugin/generate-keys.js as following, new keys will be added to the translation files in the development time as well, no need to restart ng:

1. after generateKeys({translationPath:e,scopeToKeys:t,config:r}){ insert e = "/your/absolute/path/src/assets/i18n";
2. instead of ${e}/${t?"":i}*.${r.fileFormat} write ${e}/${t?"":i+"/"}*.${r.fileFormat}

I will use this as a workaround till this issue is solved.

[austinw-fineart]

This actually isn't an Nx specific issue but rather a Windows one, the cause of which is here: https://github.com/ngneat/transloco-keys-manager/blob/9affd8edebdf3520c9f499b73de88325d8ca7506/src/webpack-plugin/generate-keys.ts#L51-L54 The problem is that glob expressions must use POSIX paths, the reason being backslashes are escape characters in glob. When running on Windows, translationPath will be a Windows path with backslashes which all get escaped, resulting in a glob expression that matches nothing. As for a solution, you can enable windowsPathsNoEscape here if you understand its limitations.

[julianpoemp]

@austinw-fineart thank you, but I had the problem on MacOS. I don't know if it's still an issue, I'll test it soon.