Angular 13 compatibility #247

bartholomej · 2021-11-11T16:33:22Z

What is in this PR?

Building UMD

Why?

Because it no longer works with Angular 13. Issue: #246

Notes

Possible breaking changes!
Tested with:
- Angular 12.0.0 (with ivy), nodejs14, nodejs16
- Angular 13.0.0 (with ivy), nodejs14, nodejs16

More testing would be appreciated :)

venraij · 2021-11-15T08:14:35Z

@bartholomej I've tested it with Angular 13 NodeJS 16 as well but still doesn't work. Gives me the same error as before your changes.

tiberiuzuld · 2021-11-15T10:25:06Z

Can confirm that this changes do not work

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '../dist/cli/cli'
Require stack:
- <path>/node_modules/@biesbjerg/ngx-translate-extract/bin/cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)

Angular 13 NodeJS 16

venraij · 2021-11-15T11:35:47Z

@bartholomej i've opened a pull request in your repo to merge my changes into your branch. The new changes fix the issues.

tiberiuzuld · 2021-11-15T13:37:44Z

@venraij
Still same issue as above.
Installed your version with "@biesbjerg/ngx-translate-extract": "github:bartholomej/ngx-translate-extract#ng13"
Or it requires a build ... ? Will try that now.

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '../dist/cli/cli.js'
Require stack:
-<path>\node_modules\@biesbjerg\ngx-translate-extract\bin\cli.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)

tiberiuzuld · 2021-11-15T13:48:06Z

Ok made the build and copied the dist folder but still not working

node:internal/modules/cjs/loader:979
    throw new ERR_REQUIRE_ESM(filename, true);
    ^

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

venraij · 2021-11-15T13:50:26Z

@tiberiuzuld give this a whirl https://www.npmjs.com/package/@misternick/ngx-translate-extract it is the packaged version. It uses the code in this branche of my repo https://github.com/venraij/ngx-translate-extract/tree/ng13

tiberiuzuld · 2021-11-15T13:58:33Z

Still the same issue

node:internal/modules/cjs/loader:979
    throw new ERR_REQUIRE_ESM(filename, true);
    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module <path>\node_modules\@angular\compile
r\fesm2015\compiler.mjs not supported.
Instead change the require of <path>\node_modules\@angular\compiler\fesm2015\compile
r.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (<path>\node_modules\@misternick\ngx-translate-extract\dis
t\parsers\pipe.parser.js:3:20)
    at Object.<anonymous> (<path>\node_modules\@misternick\ngx-translate-extract\dis
t\cli\cli.js:25:23)
    at Object.<anonymous> (<path>\node_modules\@misternick\ngx-translate-extract\bin
\cli.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

Maybe the issue in my case is the fact that I use npm i --legacy-peer-deps so I still download the @angular/compiler@13 which does not like to be loaded with require commonJS style.

tiberiuzuld · 2021-11-15T16:16:27Z

So after some more trial and error arrived at this changes:
https://github.com/biesbjerg/ngx-translate-extract/compare/master...tiberiuzuld:ng13?expand=1

My initial issue starts from the change in angular packages which now default to ESM so all the libraries depending on angular need to make the switch angular/angular#43833

My changes still don't work completely at least for my project.
It starts extracting and some point I get the error:

An error occurred: TypeError: Cannot read properties of null (reading 'name')

Issues that I encountered along the way that required changes in the code changes linked above:

ESM imports in NodeJS need to specify .js extension to make them work.
Typescript will emit .js extension only in 4.5 but currently we are stuck to 4.4 so we need to set the extension.
Yargs 16 was not working, upgraded to 17, removed @types/yargs and yargs().option
imported yargs is a constructor now, needs to be instantiated.

Commonjs packages not working with named exports:

// before
import * as glob from 'glob';
glob.sync(..)
// after
import pkg from 'glob';
const { sync } = pkg;
sync(..)

//before
import { flatten } from 'flat';
// after
import pkg from 'flat';
const { flatten } = pkg;

//before
import pkg from 'gettext-parser';
// after
const { po } = pkg;

// after
import pkg from 'typescript';
const { SyntaxKind, isStringLiteralLike, isArrayLiteralExpression, isBinaryExpression, isConditionalExpression } = pkg;

angular/compiler MethodCall not present anymore, changed to Call
__dirname not available anymore in ESM changes:

// before
.version(require(__dirname + '/../../package.json').version)
// after
.version(process.env.npm_package_version)

The changes are complex to upgrade to ng13 and the last error I hit when running the changes in my project doesn't offer any clues where to take it from there.
In case someone wants to pick up the work

Ng13

tiberiuzuld · 2021-11-15T17:20:43Z

Update:
Was able to fix all issues and to be able to run the tests under ESM except for node 12

The issues:
An error occurred: TypeError: Cannot read properties of null (reading 'exp')
and
An error occurred: TypeError: Cannot read properties of null (reading 'name')

Where from:

	protected expressionIsOrHasBindingPipe(exp: any): exp is BindingPipe {
		if (exp && exp.name && exp.name === TRANSLATE_PIPE_NAME) {
			return true;
		}
		if (exp && exp.exp && exp.exp instanceof BindingPipe) {
			return this.expressionIsOrHasBindingPipe(exp?.exp);
		}
		return false;
	}

Seems exp can be null now.

Made a new PR with my changes which work with ng13: #248

Also made a branch on my fork with the dist folder for who wants to use it directly in package.json :
https://github.com/tiberiuzuld/ngx-translate-extract/tree/ng13-dist

"@biesbjerg/ngx-translate-extract": "github:tiberiuzuld/ngx-translate-extract#ng13-dist",

venraij · 2021-11-15T19:29:02Z

@tiberiuzuld I've made some further changes which fixed the issue even via npm for me. Tried it in 2 different projects of ng13. https://github.com/venraij/ngx-translate-extract/tree/angular-13

Unfortunately it breaks compatibility with lower angular versions because of the removal of MethodCall

adnanomerovic · 2021-12-30T09:35:12Z

I have the same problem as @enchorb

enchorb · 2022-01-08T16:51:55Z

@adnanomerovic Temporary solution using patch-package and this fix:

diff --git a/node_modules/@bartholomej/ngx-translate-extract/dist/cli/tasks/extract.task.js b/node_modules/@bartholomej/ngx-translate-extract/dist/cli/tasks/extract.task.js
index 23f06c6..d408e97 100644
--- a/node_modules/@bartholomej/ngx-translate-extract/dist/cli/tasks/extract.task.js
+++ b/node_modules/@bartholomej/ngx-translate-extract/dist/cli/tasks/extract.task.js
@@ -103,7 +103,7 @@ export class ExtractTask {
     save(output, collection) {
         const dir = path.dirname(output);
         if (!fs.existsSync(dir)) {
-            mkdirp.sync(dir);
+            fs.mkdirSync(dir, { recursive: true });
         }
         fs.writeFileSync(output, this.compiler.compile(collection));
     }

tarlepp · 2022-01-09T17:41:16Z

@biesbjerg could we get some feedback from you?

zeljkoantich · 2022-01-10T09:34:32Z

It works on:

Angular v13.0.2
node v16.13.1
npm v8.1.2

pongells · 2022-01-10T10:09:49Z

It works on:

Angular v13.0.2
node v16.13.1
npm v8.1.2

does not work for me

bartholomej · 2022-01-12T18:50:19Z

@enchorb @adnanomerovic @orestisioakeimidis You're right.
I was able to replicate this and it was a case where the output folder did not exist before the extraction began.

This should be fixed in version v8.0.2

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

Let me know how it works.

bartholomej · 2022-01-12T18:59:10Z

It works on:
Angular v13.0.2
node v16.13.1
npm v8.1.2
does not work for me

@pongells Can you be a little more specific, please? What doesn't work? Any error messages? Are you using latest version of ngx-translate-extract v8.0.2?

adnanomerovic · 2022-01-13T10:00:54Z

@enchorb @adnanomerovic @orestisioakeimidis You're right. I was able to replicate this and it was a case where the output folder did not exist before the extraction began.

This should be fixed in version v8.0.2
npm i @bartholomej/ngx-translate-extract --save-dev
Let me know how it works.

It's works! :D

pongells · 2022-01-18T09:58:52Z

It works on:
Angular v13.0.2
node v16.13.1
npm v8.1.2
does not work for me
@pongells Can you be a little more specific, please? What doesn't work? Any error messages? Are you using latest version of ngx-translate-extract v8.0.2?

8.0.2 was not out at the time :) works with latest version, thank you

zeljkoantich · 2022-01-27T09:37:19Z

If there are no problems any more, maybe this PR can me merged?

bartholomej · 2022-01-27T09:41:10Z

@zeljkoantich Yes, that's what we all need 😺
What do you think @biesbjerg? 🙏

… to solve angular 13 compatibility `npm uninstall @biesbjerg/ngx-translate-extract` `npm i @bartholomej/ngx-translate-extract` see: biesbjerg/ngx-translate-extract#246 biesbjerg/ngx-translate-extract#247 angular/angular#43833 (comment)

sebastien-p · 2022-02-28T08:39:21Z

Good job @bartholomej!

Come on @biesbjerg can we please have some feedback from you?

masha-mariya4 · 2022-03-14T13:52:30Z

thanks @bartholomej!
also for me downgrade biesbjerg/ngx-translate-extract to version 5.0.0 helped with this error

zeljkoantich · 2022-05-20T09:22:48Z

@bartholomej Maybe you should you release your fork officially, then we would switch to that fork?

Another alternative would be to have you here as a contributor with all rights.
But I'm not sure if any contributor can provide you with those rights, or it has to be the owner.

The lib is used, and there are no official commits in over a year.
#257

Jace67 · 2022-06-03T07:09:04Z

@bartholomej your extractor is working on angular 13 but I am encountering a problem with output path using curly braces.
I am not sure where to write this issue so I am writing it here.

My out file path has this path in the end: "/{en,jp}.json". Running the extractor will create a file "{en,jp}.json" at my output folder. Checking the file, the extraction was a success. So the only problem is that its saving the output in an incorrect filename.

oxydeon · 2022-06-03T10:20:56Z

@bartholomej your extractor is working on angular 13 but I am encountering a problem with output path using curly braces. I am not sure where to write this issue so I am writing it here.

My out file path has this path in the end: "/{en,jp}.json". Running the extractor will create a file "{en,jp}.json" at my output folder. Checking the file, the extraction was a success. So the only problem is that its saving the output in an incorrect filename.

Are you on Windows?

On Windows I must specify each output destination individually:
ngx-translate-extract --output ./src/assets/i18n/fr.json ./src/assets/i18n/en.json

vadimwe · 2022-06-03T13:46:04Z

@enchorb @adnanomerovic @orestisioakeimidis You're right. I was able to replicate this and it was a case where the output folder did not exist before the extraction began.

This should be fixed in version v8.0.2
npm i @bartholomej/ngx-translate-extract --save-dev
Let me know how it works.

Works good! Thank you!

Jace67 · 2022-06-06T01:51:43Z

@bartholomej your extractor is working on angular 13 but I am encountering a problem with output path using curly braces. I am not sure where to write this issue so I am writing it here.
My out file path has this path in the end: "/{en,jp}.json". Running the extractor will create a file "{en,jp}.json" at my output folder. Checking the file, the extraction was a success. So the only problem is that its saving the output in an incorrect filename.

Are you on Windows?

On Windows I must specify each output destination individually: ngx-translate-extract --output ./src/assets/i18n/fr.json ./src/assets/i18n/en.json

Is this a new limitation? Yes I am on Windows and your suggestion solves my issue but I didn't encounter this issue while I was using version 7.0.4 on Windows.

FrEaKmAn · 2022-06-20T12:28:20Z

For me @bartholomej/ngx-translate-extract works nicely, but is anyone using also @biesbjerg/ngx-translate-extract-marker. Is there an alternative compatible with @bartholomej/ngx-translate-extract? Current it fails with

Error: Cannot find module '@biesbjerg/ngx-translate-extract/dist/cli/tasks/extract.task'

stevengunneweg · 2022-06-20T14:41:56Z

I currently use both @bartholomej/[email protected] and @biesbjerg/[email protected] without any issue, however I'm a little behind on some dependencies.

bartholomej · 2022-06-20T15:02:15Z

@FrEaKmAn Yes, I am using both @bartholomej/[email protected] and @biesbjerg/[email protected] together with angular 13/14 and it works well.

Although marker is still legacy View Engine library (and probably will forever remain, since no one does updates either) 😿
And there's even pull request for marker IVY compatibility.

timeimp · 2023-03-08T03:48:49Z

Is there any reason for this to be held up any more? Everyone in the comments seems to be agreeing that things work?

Or is this repo considered deprecated and we should move to another offering?

michaelbromley · 2023-03-08T07:57:38Z

@timeimp This repo is unmaintained. After consultation with the interested parties, we took on maintainership of a fork. You can read the discussion here: #246 (comment)

bartholomej and others added 4 commits November 11, 2021 17:02

chore(ng13): ng13 compatibility

5e9227d

version update

3fc4ea0

updated target/module

0dd49c0

fix testing with module

7c4018a

venraij added 3 commits November 15, 2021 12:21

fix incompatibility

5278496

fix package json

6b15ebf

testing workflow

56457c7

tiberiuzuld added 6 commits November 15, 2021 17:40

make changes for angular 13

2af42ba

update branches to build

e87de05

add file extensions

9b3eb47

remove node12 from tests

789a817

run tests as esm

0d0fdc2

update ts-node

773ad50

venraij and others added 2 commits November 15, 2021 17:20

Merge pull request #3 from tiberiuzuld/ng13

ba4852b

Ng13

fix tests

7c58eb5

tiberiuzuld mentioned this pull request Nov 15, 2021

Update to Angular 13 #248

Open

venraij added 2 commits November 15, 2021 20:22

possible fix ng13

68ec915

fix testing on both unix and windows

d5c0cf1

venraij added 2 commits November 15, 2021 21:19

Backwards compat test

472b4ee

final fixes

0c9dab6

bartholomej added 2 commits January 12, 2022 19:41

fix(extract): create deep folder which doesn't exist

20d46aa

chore(version): bump version 8.0.2

36caa71

chore(deps): update all deps

0ec5d3b

tkohr mentioned this pull request Feb 24, 2022

Fix i18n extract geonetwork/geonetwork-ui#233

Merged

bartholomej force-pushed the ng13 branch from adc02bf to 0ec5d3b Compare September 20, 2022 08:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 13 compatibility #247

Angular 13 compatibility #247

bartholomej commented Nov 11, 2021

venraij commented Nov 15, 2021 •

edited

Loading

tiberiuzuld commented Nov 15, 2021 •

edited

Loading

venraij commented Nov 15, 2021

tiberiuzuld commented Nov 15, 2021 •

edited

Loading

tiberiuzuld commented Nov 15, 2021

venraij commented Nov 15, 2021 •

edited

Loading

tiberiuzuld commented Nov 15, 2021

tiberiuzuld commented Nov 15, 2021

tiberiuzuld commented Nov 15, 2021

venraij commented Nov 15, 2021 •

edited

Loading

adnanomerovic commented Dec 30, 2021

enchorb commented Jan 8, 2022

tarlepp commented Jan 9, 2022

zeljkoantich commented Jan 10, 2022

pongells commented Jan 10, 2022

bartholomej commented Jan 12, 2022

bartholomej commented Jan 12, 2022

adnanomerovic commented Jan 13, 2022

pongells commented Jan 18, 2022

zeljkoantich commented Jan 27, 2022

bartholomej commented Jan 27, 2022

sebastien-p commented Feb 28, 2022

masha-mariya4 commented Mar 14, 2022

zeljkoantich commented May 20, 2022

Jace67 commented Jun 3, 2022

oxydeon commented Jun 3, 2022

vadimwe commented Jun 3, 2022

Jace67 commented Jun 6, 2022 •

edited

Loading

FrEaKmAn commented Jun 20, 2022

stevengunneweg commented Jun 20, 2022

bartholomej commented Jun 20, 2022

timeimp commented Mar 8, 2023

michaelbromley commented Mar 8, 2023

Angular 13 compatibility #247

Are you sure you want to change the base?

Angular 13 compatibility #247

Conversation

bartholomej commented Nov 11, 2021

What is in this PR?

Why?

Notes

venraij commented Nov 15, 2021 • edited Loading

tiberiuzuld commented Nov 15, 2021 • edited Loading

venraij commented Nov 15, 2021

tiberiuzuld commented Nov 15, 2021 • edited Loading

tiberiuzuld commented Nov 15, 2021

venraij commented Nov 15, 2021 • edited Loading

tiberiuzuld commented Nov 15, 2021

tiberiuzuld commented Nov 15, 2021

tiberiuzuld commented Nov 15, 2021

venraij commented Nov 15, 2021 • edited Loading

adnanomerovic commented Dec 30, 2021

enchorb commented Jan 8, 2022

tarlepp commented Jan 9, 2022

zeljkoantich commented Jan 10, 2022

pongells commented Jan 10, 2022

bartholomej commented Jan 12, 2022

bartholomej commented Jan 12, 2022

adnanomerovic commented Jan 13, 2022

pongells commented Jan 18, 2022

zeljkoantich commented Jan 27, 2022

bartholomej commented Jan 27, 2022

sebastien-p commented Feb 28, 2022

masha-mariya4 commented Mar 14, 2022

zeljkoantich commented May 20, 2022

Jace67 commented Jun 3, 2022

oxydeon commented Jun 3, 2022

vadimwe commented Jun 3, 2022

Jace67 commented Jun 6, 2022 • edited Loading

FrEaKmAn commented Jun 20, 2022

stevengunneweg commented Jun 20, 2022

bartholomej commented Jun 20, 2022

timeimp commented Mar 8, 2023

michaelbromley commented Mar 8, 2023

venraij commented Nov 15, 2021 •

edited

Loading

tiberiuzuld commented Nov 15, 2021 •

edited

Loading

tiberiuzuld commented Nov 15, 2021 •

edited

Loading

venraij commented Nov 15, 2021 •

edited

Loading

venraij commented Nov 15, 2021 •

edited

Loading

Jace67 commented Jun 6, 2022 •

edited

Loading