'Error using Rangy - methods are not working in Angular5

Angular 4 and modules: Rangy I followed the instructions above to import rangy. I want to use TextRange's function expand() in Rangy's documentation. However, I get the error Property 'expand' does not exist on type 'RangySelection'.

My code:

    import * as rangy from 'rangy'

    showSelectedText(){
      var selTxt = rangy.getSelection()*.expand()*;
      console.log('selTxt: '+selTxt);
}

On console.log(rangy), I get:

console.log(rangy.getSelection()) gives as output

Solution 1:^[1]

Something that worked for me in the past is importing one of the modules. And importing the other modules if needed.

    import * as rangy from 'rangy/lib/rangy-classapplier';
    import 'rangy/lib/rangy-highlighter'; //imports another module into rangy
    import 'rangy/lib/rangy-core.js'; //and another
    import 'rangy/lib/rangy-textrange';
    import 'rangy/lib/rangy-serializer';

Solution 2:^[2]

A Rangy selection only has an expand() method if the TextRange module is loaded. This is because this module is a fairly large bit of code and isn't loaded as part of Rangy's core. You just need to ensure that the module code is loaded, by whatever means you prefer.

Solution 3:^[3]

When the module is loaded (as you can see in your console.log()), but the methods aren't working, try installing the types for Rangy:

npm install --save @types/rangy

If that still does not work, you can try:

(rangy as any).getSelection().expand();

Also, make sure rangy.getSelection() returns a rangy object (and not undefined), otherwise expand() will not be available.

Solution 4:^[4]

It appears that the function is broken as console.log(Rangy.getSelection()) does not show expand() as an option.

Solution 5:^[5]

As it is mentioned in this thread: https://github.com/timdown/rangy/issues/136

The issue is fixed in new version. yet if you still have issue try using it this way:

let expandWord = rangy.getSelection();
expandWord.expand("word", {
   trim: true
});

Plus: To avoid error message in angular2+. add its types as below. try installing the types for Rangy:

npm install --save @types/rangy

Afterwards edit the index.d.ts file and add expand function to the types. in RangySelection Interface.

interface RangySelection extends Selection {
    nativeSelection: Selection;
    isBackwards(): boolean;
    refresh(checkForChanges?: boolean): any;
    toHtml(): string;
    getAllRanges(): RangyRange[];
    getRangeAt(idx: number): RangyRange;
    getNativeTextRange(): any;
    setSingleRange(range: RangyRange): any;
    setRanges(ranges: RangyRange[]): any;
    getBookmark(containerNode: Node): any;
    moveToBookmark(bookmark: Object): any;
    saveRanges(): Object;
    restoreRanges(saved: Object): any;
    saveCharacterRanges(containerNode: Node, opts?: any): Object;
    restoreCharacterRanges(containerNode: Node, characterRanges: Object, opts?: any): any;
    detach(): any;
    inspect(): string;
    move(units: string, count: number, opts?: any): number;
    //This One
    expand(session, unit?, expandOptions?);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nas Dos
Solution 2	Tim Down
Solution 3
Solution 4	inspired_learner
Solution 5	molikh

'Error using Rangy - methods are not working in Angular5

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]