How to add ACE Editor highlighter rules in angular app?

[Beyerheiser]

I try to add custom highlighter rules. My example based on this and this.

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

import * as ace from 'ace-builds';

import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/ext-language_tools';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild('codeEditor') codeEditorElmRef: ElementRef;
  private codeEditor: any;

  constructor() { }

  ngOnInit() {
    var oop = ace.require('ace/lib/oop');
    var textHighlightRules = ace.require('ace/mode/text_highlight_rules').TextHighlightRules;

    const $rules = {
      start: [
        {
          regex: /sometext/,
          token: "keyword"
        },
        {
          regex: /othertext/,
          token: "keyword"
        }
      ]
    };

    const customHighlightRules = function CustomHighlightRules() {
      this.$rules = $rules;
    };

    oop.inherits(customHighlightRules, textHighlightRules);

    //exports.MyNewHighlightRules = customHighlightRules; //??
    const element = this.codeEditorElmRef.nativeElement;

    const options = {
      minLines: 14,
      maxLines: Infinity,
      highlightSelectedWord: true,
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true
    };

    this.codeEditor = ace.edit(element, options);
    this.codeEditor.setTheme('ace/theme/github');
    this.codeEditor.getSession().setMode('ace/mode/text');
    this.codeEditor.setShowFoldWidgets(true);
  }
}

I need "sometext" to be highlighted. How to adapt this example for an angular and typescript?

[nightwing]

What do you mean by adapting to angular, the example already uses angular?

[Beyerheiser]

Yes, in this example I'm trying to use angular.

[nightwing]

This is answered on https://stackoverflow.com/questions/56569595/how-to-add-ace-editor-highlighter-rules-in-angular-app