Does this library is support with monaco editor AMD version

[Verten]

Hi there,

since in my project i use monaco editor in AMD version, so how can i use this library in AMD veresion? thanks.

[remcohaszing]

Yes, it’s the same as using Monaco from a CDN. See #231 (comment)

[Verten]

Hi @remcohaszing , thanks for you information,i am follow the instruction to use monaco-yaml but it doesn't work.

could you help to take a look? thanks.

i was using monaco editor in AMD version in Angular.

and i install "monaco-yaml",

and i am using configureMonacoYaml as below

import { editor, languages, Uri, MarkerSeverity } from 'monaco-editor';

declare let monaco: {
  editor: typeof editor;
  languages: typeof languages;
  Uri: typeof Uri;
  MarkerSeverity: typeof MarkerSeverity;
} & any;


@Injectable({
  providedIn: 'root',
})
export class MonacoEditorService {

  constructor() {  }

  private finishLoading() {
      configureMonacoYaml(monaco, {   // monaco will be initialized in global via AMD version loaded
      enableSchemaRequest: true,
      schemas: [
          // ..... some schema here
      ],
    });
  }

public load() {
    // load the assets

    const baseUrl = './assets' + '/monaco-editor/min/vs';

    if (typeof (<any>window).monaco === 'object' || !!(<any>window).monaco) {
      this.finishLoading();
      return;
    }

    const onGotAmdLoader: any = () => {
      // load Monaco
      (<any>window).require.config({ paths: { vs: `${baseUrl}` } });
      (<any>window).require([`vs/editor/editor.main`], () => {
        this.finishLoading();
      });
    };

    // load AMD loader, if necessary
    if (!(<any>window).require) {
      const loaderScript: HTMLScriptElement = document.createElement('script');
      loaderScript.type = 'text/javascript';
      loaderScript.src = `${baseUrl}/loader.js`;
      loaderScript.addEventListener('load', onGotAmdLoader);
      document.body.appendChild(loaderScript);
    } else {
      onGotAmdLoader();
    }
  }

}

and i configured the getWorker as below

window.MonacoEnvironment = {
  getWorker(moduleId, label) {
    switch (label) {
      case 'editorWorkerService':
        return new Worker(
          new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url)
        );
      case 'yaml':
        return new Worker(new URL('monaco-yaml/yaml.worker', import.meta.url));
      default:
        throw new Error(`Unknown label ${label}`);
    }
  },
};

but in console it show as below:

it can not load the related worker which i configured in getWorker method.

hope response from you, thanks.

[remcohaszing]

How exactly to resolve the worker depends on your build tooling. Apparently whatever you’re using, doesn’t support resolving new Worker(new URL('path/to/worker', import.meta.url)). Read the documentation of your build tool to learn how to solve this issue.

[Verten]

After i update the window.MonacoEnvironment as below

window.MonacoEnvironment = {
  getWorkerUrl(moduleId, label) {
    switch (label) {
      case 'editorWorkerService':
        return 'assets/monaco-editor/esm/vs/editor/editor.worker.js';
      case 'yaml':
        return 'assets/monaco-yaml/yaml.worker.js';
      default:
        throw new Error(`Unknown label ${label}`);
    }
  },
};

then the console show error as below