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 https://github.com/biesbjerg/ngx-translate-extract/pull/247#issuecomment-980078848

But as like @Tohnmeister said https://github.com/biesbjerg/ngx-translate-extract/issues/246#issuecomment-985560773:

@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 - https://github.com/biesbjerg/ngx-translate-extract/issues/246#issuecomment-987053134

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 https://github.com/biesbjerg/ngx-translate-extract/issues/246#issuecomment-980180791

[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 https://github.com/biesbjerg/ngx-translate-extract/pull/247#issuecomment-1011350636 ;)

[orestisioakeimidis]

@bartholomej I know that the following is not related to this thread, but what do you think of incorporating this PR https://github.com/biesbjerg/ngx-translate-extract/pull/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 - https://github.com/biesbjerg/ngx-translate-extract/issues/246#issuecomment-980180791), or is there a chance that this will be merged soon?

[tarlepp]

I think that we're all just waiting some feedback from @biesbjerg

[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 👍