在我的Angular 13项目中,使用monaco-editor 0.33.0,我通过以下方法加载Monaco编辑器,该方法将“loader.js”脚本标记添加到文档中:
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);
}
字符串
我看到以下JS资源加载在我的网络活动中:
- loader.js
- editor.main.js
- editor.main.nls.js
在我的组件中,我观察到isMonacoLoaded$
:
ngOnInit(): void {
this.editorService
.isMonacoLoaded$
.pipe(
filter(isLoaded => isLoaded),
take(1),
)
.subscribe((loaded) => {
this.initMonaco();
});
}
型
在这里,我创建了monaco编辑器示例:
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();
}
型
问题是,如果我在选项中指定language
,我会得到以下错误:
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)
型
我做错了什么?我已经为这个问题挣扎了好几天,非常感谢一些帮助。
1条答案
按热度按时间jv4diomz1#
调用
.create()
时,必须访问window
上的monaco.editor
对象字符串
哇,那个错误当然没有帮助,但我希望这对将来的人有帮助。