Angular 13 issue

[tarlepp]

After I upgraded Angular from 12 to 13 I got following error:

yarn run v1.22.15
$ ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json --clean --format-indentation '  ' --sort --format namespaced-json --null-as-default-value && for files in src/assets/i18n/*.json; do echo >> $files; done;
node:internal/modules/cjs/loader:979
    throw new ERR_REQUIRE_ESM(filename, true);
    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/@angular/compiler/fesm2015/compiler.mjs not supported.
Instead change the require of /app/node_modules/@angular/compiler/fesm2015/compiler.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/app/node_modules/@biesbjerg/ngx-translate-extract/dist/parsers/pipe.parser.js:3:20)
    at Object.<anonymous> (/app/node_modules/@biesbjerg/ngx-translate-extract/dist/cli/cli.js:6:23)
    at Object.<anonymous> (/app/node_modules/@biesbjerg/ngx-translate-extract/bin/cli.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.

Any idea how to fix this?

[damien-skyboy]

Hello @biesbjerg,
Can you fix this issue ?
Thanks :)

[damien-skyboy]

I tried to do something like this but error is still present :

async function loadCompiler() {
  compiler_1 = await import('@angular/compiler');
};
loadCompiler();

[sbinkert]

I have found a temporary workaround:

install @angular/[email protected] as dev dependency under an alias in your project package.json

"devDependencies": {
    ...
    "@angular/compiler12": "npm:@angular/[email protected]"
}

change the require statement to your alias package name in directive.parser.js and pipe.parser.js files:

const compiler_1 = require("@angular/compiler12");

[dimitrov-d]

I have found a temporary workaround:

install @angular/[email protected] as dev dependency under an alias in your project package.json

"devDependencies": {
    ...
    "@angular/compiler12": "npm:@angular/[email protected]"
}

change the require statement to your alias package name in directive.parser.js and pipe.parser.js files:

const compiler_1 = require("@angular/compiler12");

This works well, thanks! Hopefully we'll see an official fix soon

[tarlepp]

So currently there are multiple PR's to fix this one; #247, #248 and #249 - just reporting all those here for now.

[tarlepp]

@biesbjerg could you take a look of those PR's ?

[bartholomej]

Thanks to @venraij @tiberiuzuld @bartholomej we have a new version for Angular 13. I am using it in production already.

Pull request and branch

Hope you'll check it out soon ;) @biesbjerg

---

For those who want to use it today... Temporarily, you can install as follows:

npm i @bartholomej/ngx-translate-extract --save-dev

[Tohnmeister]

@bartholomej @tarlepp @venraij

Looks like this issue doesn't occur anymore with Angular 13.0.3.

[tarlepp]

@bartholomej @tarlepp @venraij

Looks like this issue doesn't occur anymore with Angular 13.0.3.

Oh, I need to test with that version, thanks for the info! I'll rerport the results here after I have done that, most likely late saturday or sunday.

[tarlepp]

@Tohnmeister Updated Angular to 13.0.3 version and I'm still getting exactly same error.

[bartholomej]

@tarlepp Did you try this version? v8.0.1

npm i @bartholomej/ngx-translate-extract --save-dev

[tarlepp]

@tarlepp Did you try this version? v8.0.1

npm i @bartholomej/ngx-translate-extract --save-dev

Yep with that it works just fine, I already commented that on that PR #247 (comment)

But as like @Tohnmeister said #246 (comment):

@bartholomej @tarlepp @venraij
Looks like this issue doesn't occur anymore with Angular 13.0.3.

I cannot confirm that this original library works as expected with Angular 13.0.3 version

[tarlepp]

@Tohnmeister could you provide some example repository where this repository is working with Angular 13.0.3 like you said earlier?

[Tohnmeister]

The repository we're using this is in, is not open source unfortunately. I can provide you the exact version numbers though.

@angular/cli: 13.0.4
@angular/compiler: 13.0.3
@angular/compiler-cli: 13.0.3
@angular/core: 13.0.3
@biesbjerg/ngx-translate-extract: 4.2.0
@biesbjerg/ngx-translate-extract-marker: 1.0.0
@ngx-translate/core: 11.0.1

And we have this as a script in our package.json:

"extract-i18n": "ngx-translate-extract --input ./src --output ../locale/myclient.pot --clean --sort --format pot --marker marker",

We're using quite an old version of ngx-translate-extract. But this version had the issue described in this topic, after upgrading to Angular 13.0.1 initially. It doesn't have the issue anymore after upgrading to 13.0.3. Verified by rolling back the Angular upgrade, and setting the version back to 13.0.1. Then the issue occurred again. Re-upgraded to 13.0.3 and the issue dissappeared.

Hope this helps.

[bartholomej]

@Tohnmeister Yes, I can confirm that this very old version 4.2.0 starts to extract but crashes on a few other bugs. For example:
'Parser Error: Missing expected : at column 21 in [headerTemplate; context: { data, me }]

Stable version of ngx-translate-extract doesn't work at all with Angular 13.0.3

You're using two years old version and 3 major versions have been released in the meantime, so it's just a coincidence that it works in this particular combination :)

For me, the solution is to release this new version (v8), which drops support for old versions of Angular.

What do you think?

[Tohnmeister]

I agree that the solution is to release a proper up-to-date version that supports Angular 13. Although I'd prefer having it merged in @biesbjerg's repository. What are your thoughts on LTS, etc.?

[usarskyy]

I use latest Angular version and this bug is still present:

@angular/cli: 13.0.4
@angular/compiler: 13.0.3
@angular/compiler-cli: 13.0.3
@angular/core: 13.0.3
@biesbjerg/ngx-translate-extract: 7.0.4
@ngx-translate/core: 14.0.0

[milanopetrovic]

@usarskyy Try the last Angular version (v13.1.0) with ngx-translate-extract 4.2.0. It works for me.

[tarlepp]

@usarskyy Try the last Angular version (v13.1.0) with ngx-translate-extract 4.2.0. It works for me.

You're using old version of ngx-translate-extract, see - #246 (comment)

I just updated Angular to 13.1.0 and the problem still exists.

[usarskyy]

@tarlepp
If your comment was for me, where to find the newest version ? Accordingly to NPM and Github I am using latest version:

[tarlepp]

@usarskyy I tried with Angular 13.1.0 and ngx-translate-extract version 7.0.4 and the same issue still exists. And that was for @milanopetrovic

[alejophotoart]

Hey i using angular-cli version 13.1.1 and i present the same problem
@angular/cli: 13.1.1
@angular/compiler: ~13.0.0
@angular/compiler-cli: ~13.0.0
@angular/core: ~13.0.0

[bartholomej]

@usarskyy @alejophotoart
Yes, we're still waiting for @biesbjerg to take a look at it :(

Meanhwhile you can use fork which works with Angular 13.

See this #246 (comment)

[orestisioakeimidis]

@bartholomej The fork doesn't work for me. It fails with An error occurred: TypeError: mkdirp.sync is not a function when saving to the file.

The issue seems to be this line https://github.com/bartholomej/ngx-translate-extract/blob/ng13/src/cli/tasks/extract.task.ts#L141

The imported mkdirp package is an object that contains the default property and inside there the sync function.

Can we fix that somehow until the official library is ready for Angular 13?

Thanks in advance!

[bartholomej]

@orestisioakeimidis
You're right! And here is the fix #247 (comment) ;)

[orestisioakeimidis]

@bartholomej I know that the following is not related to this thread, but what do you think of incorporating this PR #181 in you fork? It'd be great to support some kind of context in the source strings. Thanks in advance!

[sergiubologa]

I'm using version 7.0.4 and Angular 13.2.0 and the issue still reproduces.

[Pirozek]

Hey guys, is there any chance that the PR fixing the Angular 13 issues will be merged any time soon? We are choosing new translate library for our project, this one is great and only problem is, that its not working for Angular 13. Should we do our own fork (or use this one - #246 (comment)), or is there a chance that this will be merged soon?

[michaelbromley]

Hi @biesbjerg, I've been sponsoring you (via the @vendure-ecommerce org) for your great work on this library since Sept 2021. I just ran into this issue and I'm concerned about its resolution. As a long-time OSS maintainer, I'm familiar with the pressures and time constraints that can make it hard to keep up with a popular library.

If you simply have to time/ability/desire to maintain this lib, this is completely your prerogative and I certainly would understand and respect your situation. I think just some clarification on the status of this issue/this lib would go a long way in terms of giving all of us some idea of what to do next.

@bartholomej thank you for your efforts to update this 👍

[tarlepp]

Any updates on this?

[tarlepp]

@biesbjerg Could you provide input for this issue? This has been open a quite while, people have done PR's to fix this issue - but there isn't no feedback from your side.

If this repository is not active anymore, we should start to talk about givin someone else maintainer role in this repository or just say this repository is abandonded use xyz instead.

I really hope that you reply something.

[Startouf]

I'm switching my library to @bartholomej/ngx-translate-extract, seems to work like a charm with angular 13

"@bartholomej/ngx-translate-extract": "^8.0.2",

[tarlepp]

I'm witching my library to @bartholomej/ngx-translate-extract, seems to work like a charm with angular 13

"@bartholomej/ngx-translate-extract": "^8.0.2",

Yeah, that is also what I've been using - but I think that all of us would like to know if this library is still alive or it's a dead one - and if latter - we should have some proper way to continue this awesome library - that could be giving admin rights to this original repository or even announce that this repository is dead use xxx instead.

That is what I've been looking for a while after I created this issue - seen this same happen to other repositories and it's really sad - although we don't know the reasons for this - so that is also something that we need think of.

[jaytonic]

thanks @bartholomej for the fix. Maybe it would be a great idea to reference your version here: https://github.com/ngx-translate/core ?

[tarlepp]

@biesbjerg Could you please at least say something? This issue has been open quite long time and you haven't given any input from your side.

[salimchemes]

@tarlepp I just migrated from ngx-translate to https://ngneat.github.io/transloco/docs/migration/ngx just in case helps you.

[tarlepp]

@tarlepp I just migrated from ngx-translate to https://ngneat.github.io/transloco/docs/migration/ngx just in case helps you.

I see that transloco is alternative for ngx-translate library - does transloco have similar functionality as does this ngx-translate-extract library provide - command that you can run to extract all translations from .ts and .html files and sync those to all translation json files?

[salimchemes]

@tarlepp I just migrated from ngx-translate to https://ngneat.github.io/transloco/docs/migration/ngx just in case helps you.

I see that transloco is alternative for ngx-translate library - does transloco have similar functionality as does this ngx-translate-extract library provide - command that you can run to extract all translations from .ts and .html files and sync those to all translation json files?

yes it does, have a look into https://github.com/ngneat/transloco-keys-manager

[tarlepp]

@tarlepp I just migrated from ngx-translate to https://ngneat.github.io/transloco/docs/migration/ngx just in case helps you.

I see that transloco is alternative for ngx-translate library - does transloco have similar functionality as does this ngx-translate-extract library provide - command that you can run to extract all translations from .ts and .html files and sync those to all translation json files?

yes it does, have a look into https://github.com/ngneat/transloco-keys-manager

Nice, thanks for sharing - I'll take a closer look about that transloco and most likely migrate to use it.

[StefanKern]

Was there any response from the owner in the last year?

[Tohnmeister]

Was there any response from the owner in the last year?

No, there wasn't. Additionally, I sent @biesbjerg a mail last year, without any response. I hope he's okay.

[tarlepp]

Was there any response from the owner in the last year?

Nope, haven't seen any replies from @biesbjerg

[StefanKern]

Was there any response from the owner in the last year?

Nope, haven't seen any replies from @biesbjerg

Sad. Are there any plans to take it over (e,g, @bartholomej/[email protected])?

[usarskyy]

@Tohnmeister I think, he is. Github reports 17 contributions this year:

[michaelbromley]

It's pretty clear that Kim is no longer maintaining this project, for whatever reason. We need an "official" successor project + package that we can all safely migrate to.

I've been using the fork from @bartholomej for the past year or so without issue, but I'm not sure whether he is willing to be the maintainer of a new successor package. If not, I have a proposal:

I'm the maintainer of a popular e-commerce framework, Vendure, and we use this package in our admin UI app. I'd be willing to maintain a fork of this project and make it available under our GH & npm orgs, so the package would be @vendure/ngx-translate-extract.

This is a full-time OSS project and is backed by a company, so maintenance will be stable and reliable. What do you all think?

[orestisioakeimidis]

That would be awesome @michaelbromley! Thanks for picking it up!

[michaelbromley]

Hi all.
Just following up on this: @bartholomej do you have any input on this? Are you happy being the official successor project to this one? Are you willing to take on whatever maintenance burden this entails?

Before I go ahead and create a new npm package, I want to see if Bart has anything to say on the matter - better to not further fragment into competing packages if he fully intends to keep maintaining his fork & package.

[bartholomej]

@michaelbromley I can see this repository has 58 issues unresolved and 20 pull requests. I am afraid I won't have time to take care of it in the future.
If you have full-time project and will be able to take care of it, we'll all be happy :) 🎉

I can help if I get access as a collaborator, but as I said, I won't have time to do it myself.

[Ismaestro]

any updates?

[michaelbromley]

Hi everyone,

Thanks for your patience! I've now set up a fork: https://github.com/vendure-ecommerce/ngx-translate-extract

and published the first release under the new org:

npm i @vendure/ngx-translate-extract

v8.0.3 is the first version, and nothing has changed apart from references in the readme & package.json.

Thank you @biesbjerg for all the work you put in to this up till now, and for @bartholomej for keeping us all rolling for the past year or so. Bart I invited you to the repo with write access 👍

I'm not planning to go through all the issues & PRs in this repo, but I welcome issues & PRs on the new fork repo.