Incorporating the Monaco Editor into an Angular 18 project was vital for me as it allowed me to embed custom code snippets within a form, benefiting from its code suggestion feature.
Despite installing the monaco-editor npm package and setting it up in a component with the following code:
<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',
});
}
}
}
The setup allowed me to view and write code within the editor window, though the full functionality of Monaco was not operational. Features like accessing commands by pressing F1, code highlighting, and suggestions were non-functional.