Bug: transloco-key-manager breaks in a nx workspace of version 15.7.0 or higher

[JelleBruisten]

Is there an existing issue for this?

• I have searched the existing issues

Is this a regression?

Yes

Current behavior

When running the transloco-key-manager in a nx workspace of version 15.7.x the key manager does not work, upon trying to run it with

npx transloco-keys-manager extract or npx transloco-keys-manager find

You will get the following output.

Unable to load workspace config from angular.json, .angular.json, workspace.json. Defaulting source root to 'src'
Input path provided doesn't exists!

nx version 15.7.x removed the angular.json, which is causing the error in the key manager. When restoring this file the error goes away, but nx will then no longer work correctly.

Expected behavior

transloco-key-manager working as before/intended

Please provide a link to a minimal reproduction of the bug

Transloco Config

No response

Debug Logs

Unable to load workspace config from angular.json, .angular.json, workspace.json. Defaulting source root to 'src'
Input path provided doesn't exists!

### Please provide the environment you discovered this bug in

```markdown
Transloco: 4.2.2
Transloco Keys Manager: 3.5.0
Angular: 15.1.4
Node: 18.13.0
Package Manager: yarn
OS: Windows & Linux ( Ubuntu )
nx: 15.7.2

Additional context

No response

I would like to make a pull request for this bug

No

[pookdeveloper]

Same problem here

[shaharkazaz]

@JelleBruisten @pookdeveloper You are welcome to open a PR and support project-level configs

[robertIsaac]

I'm still facing problem using the latest 3.6.2

[shaharkazaz]

@robertIsaac Please share a link to a reproduction repo, once shared I'll reopen.

[robertIsaac]

@shaharkazaz https://github.com/robertIsaac/repro-transloco

[JelleBruisten]

I have a similar problem with running npx transloco-keys-manager extract however I am able to work around the problem with running: npx transloco-keys-manager extract --project foo

So specifying the project you wan't to extract does work now, calling it like before for all projects in a workspace does not however.

Workaround you can add a target to your project.json of your projects within a nx workspace like so:

    "i18n-extract": {
      "executor": "nx:run-commands",
      "options": {
        "command": "npx transloco-keys-manager extract --project foo"
      }
    }

Then you can also run this like this:
nx affected --target=i18n-extract so you will just extract affected libraries by your code changes
or run on all:
nx run-many --target=i18n-extract

[shaharkazaz]

@JelleBruisten Specifying the project when you don't have a root config is mandatory, otherwise there is no way for me to tell which project you need (no default)
Would you like to open a PR to update the docs? maybe also add the recipe for nx?

@robertIsaac were you trying to run the command without passing a project?

[robertIsaac]

in the repro yes I forget to pass the project
in the real project no, I was passing the project

I confirm the repro works now when passing the project, I need to double check what's wrong with the real project and get back to you

[robertIsaac]

I found the problem

I was trying to run transloco-keys-manager extract --project web-app where web-app is the name of the project
what actually worked was npx transloco-keys-manager extract --project web where web is the name of the folder

[shaharkazaz]

@robertIsaac Thanks for sharing, they are usually the same name, any reason for this diff in your workspace?

[robertIsaac]

we have sub-libraries with the same folder name but different project name
e.g. libs/feature1/services with project name feature1-services and libs/feature2/services with project name feature2-services
so we have duplicate folder names but inside different roots and we are using the feature1-services to run them
lucky me these libraries don't have translations

I guess it will be nice to pass the project name instead of the folder to work with this kinda problems

[shaharkazaz]

@robertIsaac It's based on the project name but there is an assumption that it will be found under a folder with the same name, since there is no root workspace config there is no mapping for project name -> path

[JelleBruisten]

@shaharkazaz

@JelleBruisten Specifying the project when you don't have a root config is mandatory, otherwise there is no way for me to tell which project you need (no default) Would you like to open a PR to update the docs? maybe also add the recipe for nx?

Yeah I noticed from looking at the source, and yes I can make a PR ( likely tomorrow )

[pookdeveloper]

npx transloco-keys-manager extract --project

Extract works, but find not works in nx monorepo

[shaharkazaz]

@pookdeveloper It's not working on the reproduction repo that @robertIsaac provided?

[pookdeveloper]

@pookdeveloper It's not working on the reproduction repo that @robertIsaac provided?

no.. I try in my repo

[mackelito]

I still have problems with this..
in project.json "name": "feature-signing"
and the path is /libs/beta/feature-signing/project.json

no matter how I try... I still see Unable to load workspace config from angular.json, .angular.json, workspace.json, project.json. Defaulting source root to 'src'

[JelleBruisten]

@mackelito

I used to have this same problem however I made a executor for nx as a wrapper around the transloco-key-manager this executor does more then just execute this for some internal stuff related to translations.

Anyway when it does call the transloco-key-manager it does execute the following:

const command = `npx transloco-keys-manager extract --project ${projectRoot}`;

so instead of using the project name you pass in the projectRoot so in your case that would be /libs/beta/feature-signing

making it:

npx transloco-keys-manager extract --project /libs/beta/feature-signing

Hope this helps

[mackelito]

you are a life saver!! thx!.. spend almost 2 days testing all kind of combinations 😄
No I just need to figure out how we handle translations that should be mapped in api repsonses 🙌

[mackelito]

Perhaps you have some suggestion?
Right now I get "...": "Missing value for '...'"

  getHeader(): string {
    let key;
    if (!this.mobile) {
      key = 'beta.header_mobile_bank_id';
      this.translocoService.translate(key);
    } else {
      key = 'beta.header_bank_id';
    }
    return this.translocoService.translate(key);
  }

  <h4 *ngIf="!mobileView">
    {{ t(getHeader()) }}
  </h4>

[JelleBruisten]

Oh good that it worked 😄

Perhaps you have some suggestion?

You seem to be returning the translation itself not the key, I would do it like this:

import { marker as t } from '@ngneat/transloco-keys-manager/marker';

  getHeader(): string {
    if (!this.mobile) {
      return t('beta.header_mobile_bank_id');
    } else {
      return t('beta.header_bank_id');
    }
  }

The marker function returns the string that is being put into it, however it "marks" the string such that the key-manager picks it up.

[mackelito]

hmmm.. I changed it to this

          @if (this.mobile) {
          {{ t('beta.header_mobile_bank_id') }}
          } else {
          {{ t('beta.header_bank_id_on_card') }}
          }

But I still get that strange missing entry in lang file: "...": "Missing value for '...'",

[mackelito]

I realise that we have some other challenges as well..
like this one

{{ t('bankIdStatus.status_' + status.status.toLowerCase()) }}

where status is a @input() from the parent component... :/
and in the parent component it's a Subject populated with the result from a api response...

[mackelito]

Never mind.. I just remembered they docs on dynamic keys :D

[mackelito]

@mackelito

I used to have this same problem however I made a executor for nx as a wrapper around the transloco-key-manager this executor does more then just execute this for some internal stuff related to translations.

Anyway when it does call the transloco-key-manager it does execute the following:

const command = `npx transloco-keys-manager extract --project ${projectRoot}`;

so instead of using the project name you pass in the projectRoot so in your case that would be /libs/beta/feature-signing

making it:

npx transloco-keys-manager extract --project /libs/beta/feature-signing

Hope this helps

Are you able to pass in --config when doing it this way? I only get it working properly where there is a transloco.config.ts file in the same path.. but would like to use the same for all libraries :)