Naftis
Naftis

Reputation: 4559

Importing rangy in Angular 17 fails with 'crippled' object

I am having issues in using rangy with an Angular 17 application. I am using the latest available version of rangy (1.3.1), on a newly created application using ng new, as follows:

(1) create a new Angular 17 app: ng new rangy-repro

(2) install rangy (latest version 1.3.1) and its types:

npm install rangy
npm install @types/rangy --save-dev --force

(3) import rangy in app-component.ts:

import * as rangy from 'rangy';

as suggested in this post, and working up to recent time.

(4) in the AppComponent constructor, call rangy.getSelection:

let s = rangy.getSelection();

When I run the app, I get an error because rangy has no getSelection function defined (which BTW is the only function I need, yet it does not seem that there are alternatives to rangy here).

The same code and library version works fine in an Angular apps created with previous versions of Angular CLI (15 in my case), which did not yet have the standalone components option as the default, and so still use modules. There, the getSelection function is defined in the rangy object, together with other functions and properties. Here instead I get only a few members, like init, version, etc., but not getSelection. I also get a default property.

Of course, Angular always reminds me that rangy is not ESM, but this did not affect its functionality, at least in previous versions. When I compile, now I still get a warning:

 [WARNING] Module 'rangy' used by 'src/app/app.component.ts' is not ESM
  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

But then I also get a crippled version of the rangy object. AFAIK, this may point to some tree-shaking related issue.

I have tried to directly import rangy JS like:

import 'rangy/lib/rangy-core.js';
import 'rangy/lib/rangy-textrange';
import 'rangy/lib/rangy-serializer';

or even just import { getSelection } from 'rangy';, or to import the JS files directly in angular.json under scripts:

"scripts": [
  "node_modules/rangy/lib/rangy-core.js",
  "node_modules/rangy/lib/rangy-textrange.js",
  "node_modules/rangy/lib/rangy-serializer.js",
  "node_modules/rangy/lib/rangy-selectionsaverestore.js",
  "node_modules/rangy/lib/rangy-classapplier.js",
  "node_modules/rangy/lib/rangy-highlighter.js"
]

Yet, nothing changes, and at any rate if tree-shaking is the culprit it would be working the same even in this case.

If I generate a non-standalone app, using ng new rangy-repro --standalone false, and then add the rangy package and import and use it as described above, I get the same issue; so at least this does not seem to be related to standalone in itself, but rather to other build issues. If tree shaking is the culprit, how can I disable it for rangy? Or can you suggest any other workaround to use rangy in an Angular 17 application?

Upvotes: 0

Views: 105

Answers (0)

Related Questions