Reputation: 4559
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