Throwing error => Editor and Range is undefined when implementing convergence with Monaco in angular 9

Hi,
I am trying to implement Monaco editor with convergence in angular 9, but I’m facing the error.
Whenever I press the key in the editor, the below error message logs will appear at other participant’s consoles.


It is showing that editor and Range is undefined in monaco-collab-ext.js library file

I have successfully implemented Monaco editor with convergence without Angular 9 (Simple JS).

Code -

index.html

    <script src="assets/monaco/rxjs.umd.min.js"></script>

    <script src="assets/monaco/convergence.global.js"></script>

    <script src="assets/monaco/monaco-collab-ext.js"></script>

    <script src="assets/monaco/loader.js"></script>

    <script>

        require.config({

            paths: {

                'vs': 'assets/monaco/libs/monaco-editor/min/vs'

            }

        });

    </script>

    

    <script src="assets/monaco/editor.main.nls.js"></script>

    <script src="assets/monaco/editor.main.js"></script>

</body>

code.component.ts

ngOnInit(): void {

    //this.codeService.initEditor();

    this.editor = monaco.editor.create(document.getElementById('container'), {

      value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),

      language: 'javascript'

    });

    this.connectToDomain();
  }

connectToDomain() {

    Convergence.connectAnonymously(url,"Suhas" )

      .then(d => {

        this.domain = d;

        // Now open the model, creating it using the initial data if it does not exist.

        return this.domain.models().openAutoCreate({

          collection: "example-monaco",

          id: "12345",

          data: {

            "text": "Hello world"

          }

        })

      })

      .then((model) => {

        //const adapter = new MonacoConvergenceAdapter(this.editor, model.elementAt("text"));

        //adapter.bind();    

        this._model = model.elementAt("text");

        this._colorAssigner = new ConvergenceColorAssigner.ColorAssigner();

        this.bind();

      })

      .catch(error => {

        console.error("Could not open model ", error);

      });

  }

  bind() {

    this._initSharedData();

    this._initSharedCursors();

    this._initSharedSelection();

  }

  _initSharedData() {

    this._contentManager = new MonacoCollabExt.EditorContentManager({

      editor: this.editor,

      onInsert: (index, text) => {

        this._model.insert(index, text);

      },

      onReplace: (index, length, text) => {

        this._model.model().startBatch();

        this._model.remove(index, length);

        this._model.insert(index, text);

        this._model.model().completeBatch();

      },

      onDelete: (index, length) => {

        this._model.remove(index, length);

      },

      remoteSourceId: "convergence"

    });

    this._model.events().subscribe(e => {

      switch (e.name) {

        case "insert":

          this._contentManager.insert(e.index, e.value);

          break;

        case "remove":

          this._contentManager.delete(e.index, e.value.length);

          break;

        default:

      }

    });

  }

  _initSharedCursors() {

    this._remoteCursorManager = new MonacoCollabExt.RemoteCursorManager({

      editor: this.editor,

      tooltips: true,

      tooltipDuration: 2

    });

    this._cursorReference = this._model.indexReference("cursor");

    const references = this._model.references({ key: "cursor" });

    references.forEach((reference) => {

      if (!reference.isLocal()) {

        this._addRemoteCursor(reference);

      }

    });

    this._setLocalCursor();

    this._cursorReference.share();

    this.editor.onDidChangeCursorPosition(e => {

      this._setLocalCursor();

    });

    this._model.on("reference", (e) => {

      if (e.reference.key() === "cursor") {

        this._addRemoteCursor(e.reference);

      }

    });

  }

  _setLocalCursor() {

    const position = this.editor.getPosition();

    const offset = this.editor.getModel().getOffsetAt(position);

    this._cursorReference.set(offset);

  }

  _addRemoteCursor(reference) {

    const color = this._colorAssigner.getColorAsHex(reference.sessionId());

    const remoteCursor = this._remoteCursorManager.addCursor(reference.sessionId(), color, reference.user().displayName);

    reference.on("cleared", () => remoteCursor.hide());

    reference.on("disposed", () => remoteCursor.dispose());

    reference.on("set", () => {

      const cursorIndex = reference.value();

      remoteCursor.setOffset(cursorIndex);

    });

  }

  _initSharedSelection() {

    this._remoteSelectionManager = new MonacoCollabExt.RemoteSelectionManager({ editor: this.editor });

    this._selectionReference = this._model.rangeReference("selection");

    this._setLocalSelection();

    this._selectionReference.share();

    this.editor.onDidChangeCursorSelection(e => {

      this._setLocalSelection();

    });

    const references = this._model.references({ key: "selection" });

    references.forEach((reference) => {

      if (!reference.isLocal()) {

        this._addRemoteSelection(reference);

      }

    });

    this._model.on("reference", (e) => {

      if (e.reference.key() === "selection") {

        this._addRemoteSelection(e.reference);

      }

    });

  }

  _setLocalSelection() {

    const selection = this.editor.getSelection();

    if (!selection.isEmpty()) {

      const start = this.editor.getModel().getOffsetAt(selection.getStartPosition());

      const end = this.editor.getModel().getOffsetAt(selection.getEndPosition());

      this._selectionReference.set({ start, end });

    } else if (this._selectionReference.isSet()) {

      this._selectionReference.clear();

    }

  }

  _addRemoteSelection(reference) {

    const color = this._colorAssigner.getColorAsHex(reference.sessionId())

    const remoteSelection = this._remoteSelectionManager.addSelection(reference.sessionId(), color);

    if (reference.isSet()) {

      const selection = reference.value();

      remoteSelection.setOffsets(selection.start, selection.end);

    }

    reference.on("cleared", () => remoteSelection.hide());

    reference.on("disposed", () => remoteSelection.dispose());

    reference.on("set", () => {

      const selection = reference.value();

      remoteSelection.setOffsets(selection.start, selection.end);

    });

  }

code.component.html

<div>

        <div id="container" style="width: 800px; height: 300px;"></div>

    </div>

Are you using an angular specific Monaco package. I am wondering if there is a different version of Monaco being imported.

I have tried both packages i.e. simple JS example which is given on the convergence website & the npm package i.e. ngx-monaco-editor(https://www.npmjs.com/package/ngx-monaco-editor).

Simple JS Monaco editor version - 0.15.5

ngx-monaco-editor- 8.1.1

I believe the current version of our collaborative extensions required at least 0.15.6. Any there seem to be reports that 0.19 is the minimum version. We are looking in to that now.

I have tried with [email protected] but no luck.

It is showing range is undefined in console