Search code examples
angularinternationalizationtransloco

Handle Angular monorepo with Transloco


We use a Angular v15 monorepo that contains several applications and libraries. The monorepo and applications are created using the directions from the Angular CLI documentations. The libraries are Angular modules that can be imported in other libraries or applications through a path mapping in the tsconfig.json file. This works like a charm.

For i18n support we have opted to use Transloco instead of NGX-Translate as the latter is no longer actively developed. Adding Transloco to the monorepo was easy and works out of the box. Translations from the libraries are, for now, loaded when the library in loaded in an application and this also works as it should.

Now we have included the Transloco Keys Manager and the extract and find commands works as they should for the applications using the --project option. However, when I use the following command to extract the keys for a library I get an Input path provided doesn't exist! error:

./node_modules/.bin/transloco-keys-manager extract -i projects/ui-lib/src/lib/ -o projects/ui-lib/src/assets/i18n/

Our monorepo structure is:

<project-dir>
  - transloco.config.js
  + projects
    + app-1
    + app-2
    + ui-lib
      + src
        + assets
          + i18n
            - en.json
        + lib
          + ui-component-1
          + ui-component-2
          - ui-lib.module.ts

The Transloco configuration contains

module.exports = {
  langs: ['en'],
  keysManager: {
        input: 'app',
        translationsPath: 'assets/i18n',
        sort: true,
        addMissingKeys: true,
        replace: false,
        emitErrorOnExtraKeys: true,
        defaultValue: 'MISSING:{{key}}'
    }
};

Any suggestions on how to solve this? Relevant version info:

  • Angular v15.2.8
  • Transloco v4.2.2
  • Transloco Keys Manager v3.7.0

Solution

  • One solution is to add a dummy project in angular.json for the library:

    "UILib": {
      "projectType": "library",
      "root": "projects/ui-lib",
      "sourceRoot": "projects/ui-lib/src"
    }
    

    Also, make sure that the keyManager object in the transloco configuration file doesn't specify an input property as this will be determined by the project type.