Use keys-manager tools with a built angular project folder passed as input option

pedraldo commented 4 years ago

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

My team and I develop angular libraries (let's take one as an example and call it ngLib) that use Transloco very well (congrats for your job btw 👍 ).
We published this library in our private npm repository.
Then we install ngLib in a classic angular project (call it ngClassic) via npm. So ngLib is a dependency of ngClassic (a node module).
We define JSON translation files inside ngClassic and ngLib consumes correctly translation files and display well translations thanks to a Transloco Root Module well configured in ngLib.

But the thing is that we can't use transloco-keys-manager tools in ngClassic project. Actually, it's not possible to check keys defined in ngClassic and used in its ngLib dependency (node module).
This is due to the fact that ngLib dependency is build and so translations (template or typescript) are included in generated js files (for typescript translations) and apparently the ***.metadata.json file (for template translation).

IMPORTANT THING
In reality, in my team project, we will have multiple ngClassic projects. Each will use (or not) ngLib libraries we develop in different ways. It means that each ngClassic project has same translation files structure (= same keys) but not same translations.

SO : We can't have a single angular project with all libraries inside.

Expected behavior

It could be awesome if transloco-keys-manager tools could detect translation keys of a built angular project (in my case build angular library project).

Minimal reproduction of the problem with instructions

First possibility : Create an angular project with a library, install and configure transloco, add some tranlsations in JSON files and use it on template / typescript files. Create a classic angular project that will have in dependency the previous angular library created (for that use npm link). Install transloco-keys-manager and configure it to check the node module library files in input of extract / find script.

Second possibity : Create a classic angular project, install and configure transloco, add some tranlsations in JSON files and use it on template / typescript files. Build it with ng build --prod. Install transloco-keys-manager and configure it to check the build result in dist project root folder as the input of extract / find script.

What is the motivation / use case for changing the behavior?

The main goal of the request is to allow keys checking and extraction in an angular project where its translation files are consumed by a an angular library dependency (node module).

Today, if we want to use transloco-keys-manager, we have to use it in the ngLib project :

define JSON translations files outside of the projects folder
install transloco-keys-manager and configure it
and it's working

But if all keys checking is ok, then we have to manually copy JSON translation files from ngLib to ngClassic.

Environment


Angular version: 9.1.4


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 12.16.1  
- Platform:  Mac

Others:

Anyway, thank you for your excellent work on Transloco and its tools 👍

pedraldo commented 4 years ago

Hi,
I just wanted to let you know that I'm actually trying to develop some kind of solution for this feature request.
I could suggest a PR in the future but my work is still in progress.

At this moment I added modification to handle keys detection used in template (HTML) inside a built angular project folder thanks to the ***.metadata.json file parsing. To do that I didn't need to implement another key extractor function, I reused the existing templateExtractor (with some minor modifications).
This part is actually working well.

Concerning keys used in TypeScript files, it seems to be a bit more complicated because it will not be possible to reuse the TSExtractor.
Indeed, keys used in ts files can be found in a js file for a built angular project folder (for example the ***.umd.js generated file).
The TSExtractor uses a specific "TypeScript AST" parsing library : phenomnomnominal/tsquery.
I quickly tried to use it for parsing the JS file but as expected it didn't work. So the solution could be to implement a JSExtractor that could correctly detect translation keys used in js (umd.js) file. I actually plan to dive into this next week.

@shaharkazaz, let me know your feeling about it 😉.

shaharkazaz commented 4 years ago

@pedraldo Hi, great to see that you are developing this feature! just to understand, you are extracting from a built project?

pedraldo commented 4 years ago

@shaharkazaz Yes exactly !
From the result of an angular project (library) built with ng build —prod for example.
Do you think this could be an interesting feature (PR) ? I think I will submit a PR anyway in the future to be able to discuss about this with more details on how it could be developed.

shaharkazaz commented 4 years ago

@pedraldo why not create the keys from the uncompiled version and just add the file at the end?

pedraldo commented 4 years ago

@shaharkazaz I don't understand what you mean by adding the file at the end ?
Which file do you think about ? Translation file (JSON) ?

The thing that could be possible would be :

Build the library with a command like ng build --project=myLib —prod.
Copy keys (JSON tranlsation files and folders) from the root project (src/asssets/i18n) inside the build (= post build treatment), for example at the root of the generated build folder (dist).

And finally I could access to the library translation keys from the project that uses the library as a node_module, and compare with its own keys, but with that solution I couldn't use one of the transloco-keys-manager tools (?!) ...
Something like compare-json for example.

I could try this, it would be easier ...

To be clearer, if myNgApp has myNgLib as a node module dependency, with that "build flow" I could try to compare translation keys of myNgApp/src/assets/i18n and translation keys of myNgApp/node_modules/myNgLib/i18n ...

jsverse / transloco-keys-manager