typescript Monaco-editor - 'json'语言抛出意外的用法错误

t3psigkw  于 2023-08-08  发布在  TypeScript
关注(0)|答案(1)|浏览(229)

在我的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)


我做错了什么?我已经为这个问题挣扎了好几天,非常感谢一些帮助。

jv4diomz

jv4diomz1#

调用.create()时,必须访问window上的monaco.editor对象

this.editor = (window as any).monaco.editor.create(this.editorElement.nativeElement, options);

字符串
哇,那个错误当然没有帮助,但我希望这对将来的人有帮助。

相关问题