ACE editor - allow custom modes and themes in Angular/TypeScript

Question

Introduction:

I've an Angular application where custom SQL statements can be written by using the ACE editor (https://ace.c9.io/). Even though there are modes and themes for SQL, I wanted to create a custom mode and a custom theme for my requirements.

---

Setup:

I followed this tutorial: https://blog.shhdharmen.me/how-to-setup-ace-editor-in-angular

• ng new ace-app (Angular 13.3.2)
• npm install ace-builds (ACE-Builds 1.4.14)

component.ts

import * as ace from 'ace-builds';

...

public aceEditor: ace.Ace.Editor;

@ViewChild('editor') private editor!: ElementRef<HTMLElement>;

...

  ngAfterViewInit(): void {
    // I don't understand why we don't set the "basePath" to our installed package
    ace.config.set('basePath', 'https://unpkg.com/[email protected]/src-noconflict');

    this.aceEditor = ace.edit(this.editor.nativeElement);

    if (this.aceEditor) {
      this.aceEditor.setOptions({
        mode: 'ace/mode/sql',
        theme: 'ace/theme/sqlserver',
      });
    }

component.html

<div #editor></div>

---

Result:

The editor is working, but now I need to somehow add a custom mode and theme.

---

Problems and Questions:

• Is it correct to set the basePath to an external URL if I've the package already installed (obsolete due to Edit 1)?
• How and where would I add the custom mode.js and theme.js?
• How can I direct ace to the custom mode.js and theme.js?

---

Edit 1:

I managed to get rid of this line of code:

ace.config.set('basePath', 'https://unpkg.com/[email protected]/src-noconflict');

by directly importing the theme and mode with:

import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-sqlserver';

the rest of the code did not have to be changed.