In my Angular 13 project, using monaco-editor 0.33.0, I am loading the Monaco editor via this method, which adds the "loader.js" script tag to the document:
loadMonaco(): void {
const loader = (): void => {
const vsPath = this.monacoPath;
(window as any).amdRequire = (window as any).require;
(window as any).amdRequire.config({ paths: { vs: vsPath } });
// Load monaco
(window as any).amdRequire(['vs/editor/editor.main'], () => {
this.ngZone.run(() => {
this.isMonacoLoaded$.next(true);
console.log('loader finished');
});
}, (error) => console.error('Error loading monaco-editor: ', error));
};
// Check if AMD loader already available
const isAmdLoaderAvailable = !!(window as any).amdRequire;
if (isAmdLoaderAvailable) {
return loader();
}
const loaderScript: HTMLScriptElement = document.createElement('script');
loaderScript.type = 'text/javascript';
loaderScript.src = `${ this.monacoPath }/loader.js`;
loaderScript.id = 'monacoLoader';
loaderScript.addEventListener('load', loader);
document.body.appendChild(loaderScript);
}
I see the following JS resources loaded in my network activity:
In my component, I am observing isMonacoLoaded$
:
ngOnInit(): void {
this.editorService
.isMonacoLoaded$
.pipe(
filter(isLoaded => isLoaded),
take(1),
)
.subscribe((loaded) => {
this.initMonaco();
});
}
From there, I am creating the monaco editor instance:
initMonaco(): void {
const options: monaco.editor.IStandaloneEditorConstructionOptions = {
...this.defaultOptions,
...this.options,
value: this.value,
};
this.editorService.setCustomTheme();
this.editor = monaco.editor.create(this.editorElement.nativeElement, options);
const model = this.editor.getModel();
this.value = model.getValue();
}
The problem is, that if I specify a language
in the options, I get the following errors:
ERROR Error: Unexpected usage
Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:460:1)
at webWorker.js:38:1
at _ZoneDelegate.push.23484._ZoneDelegate.invoke (zone.js:409:1)
at Object.onInvoke (core.mjs:25568:1)
at _ZoneDelegate.push.23484._ZoneDelegate.invoke (zone.js:408:1)
at Zone.push.23484.Zone.run (zone.js:169:1)
at zone.js:1326:1
at _ZoneDelegate.push.23484._ZoneDelegate.invokeTask (zone.js:443:1)
at Object.onInvokeTask (core.mjs:25555:1)
at _ZoneDelegate.push.23484._ZoneDelegate.invokeTask (zone.js:442:1)
at errors.js:12:1
at timer (zone.js:3128:1)
at _ZoneDelegate.push.23484._ZoneDelegate.invokeTask (zone.js:443:1)
at Object.onInvokeTask (core.mjs:25555:1)
at _ZoneDelegate.push.23484._ZoneDelegate.invokeTask (zone.js:442:1)
at Zone.push.23484.Zone.runTask (zone.js:214:1)
at push.23484.ZoneTask.invokeTask (zone.js:525:1)
at ZoneTask.invoke (zone.js:514:1)
at data.args.<computed> (zone.js:3108:1)
What am I doing wrong? I've been struggling with this issue for several days and would greatly appreciate some help.
You have to access the monaco.editor
object on the window
when calling .create()
this.editor = (window as any).monaco.editor.create(this.editorElement.nativeElement, options);
Wow, that error was certainly not helpful, but I hope this helps someone in the future.