Monaco-editor

Question

在我的 Angular 13 项目中，使用 monaco-editor 0.33.0，我通过这种方法在我的 Angular 项目中加载 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 资源 activity:

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)

我做错了什么？我已经为这个问题苦苦挣扎了好几天，非常感谢您的帮助。

Answer 1

您必须在调用 .create()

时访问 window 上的 monaco.editor 对象

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

哇，那个错误当然没有帮助，但我希望这对以后的人有所帮助。

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

Monaco-editor - 'json' language throws unexpected usage error

angular

typescript