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/compiler@12.0.0 as dev dependency under an alias in your project package.json

"devDependencies": {
    ...
    "@angular/compiler12": "npm:@angular/compiler@12.0.0"
}

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/compiler@12.0.0 as dev dependency under an alias in your project package.json

"devDependencies": {
    ...
    "@angular/compiler12": "npm:@angular/compiler@12.0.0"
}

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?