Monaco editor implementation in angular 18

I would like to use the Monaco Editor in an Angular 18 project to embed custom small code snippets in a form, as the Monaco Editor offers the ability to edit code suggestions.

After implementing the monaco-editor package, I was unable to get the editor running.

I installed the monaco-editor npm package and integrated it into a component as follows:

<div id="container" class="h-[50vh]"></div>


import { Component } from '@angular/core';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

@Component({
selector: 'app-code-editor',
templateUrl: './code-editor.component.html',
styleUrl: './code-editor.component.scss',
})
export class CodeEditorComponent {
ngAfterViewInit() {
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
if (label === 'json') {
return './vs/language/json/json.worker.js';
}
if (label === 'css' || label === 'scss' || label === 'less') {
return './vs/language/css/css.worker.js';
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return './vs/language/html/html.worker.js';
}
if (label === 'typescript' || label === 'javascript') {
return './vs/language/typescript/ts.worker.js';
}
return './vs/editor/editor.worker.js';
},
};

const element = document.getElementById('container');
if (element) {
monaco.editor.create(element, {
value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
'\n',
),
language: 'javascript',
});
}
}
}


After the integration, I was able to see the editor window and enter code, but none of the Monaco functionalities were available. Pressing F1 for commands didn't work, and neither did code highlighting or suggestions.

Continue reading...