Using Angular 18 (with standalone modules).
The monaco module used is ngx-monaco-editor-v2.

The goal is for the editor to check YAML code against a JSON schema. Works well with JSON with the code below.

app.config.ts

import {
  ApplicationConfig,
  importProvidersFrom,
  provideZoneChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
import ParserConfSchema from 'bom-cdm/schemas/parserconf.json';

const onMonacoLoad = () => {
  const monaco = (window as any).monaco;

  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
    validate: true,
    schemas: [
      {
        uri: 'http://myserver/foo-schema.json',
        fileMatch: ['*'],
        schema: ParserConfSchema,
      },
    ],
  });
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideAnimationsAsync(),
    importProvidersFrom(
      MonacoEditorModule.forRoot({
        onMonacoLoad: onMonacoLoad,
      })
    ),
  ],
};

conf-editor.component.html

  <ngx-monaco-editor
    [options]="editorOptions"
    [(ngModel)]="data.code"
  ></ngx-monaco-editor>

conf-editor.component.ts

import { Component, Inject } from '@angular/core';
import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
import {
  MAT_DIALOG_DATA,
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogRef,
  MatDialogTitle,
} from '@angular/material/dialog';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-conf-editor',
  standalone: true,
  imports: [
    MonacoEditorModule,
    MatDialogContent,
    MatDialogActions,
    MatDialogClose,
    MatDialogTitle,
    MonacoEditorModule,
    FormsModule,
    MatButtonModule,
  ],
  templateUrl: './conf-editor.component.html',
  styleUrl: './conf-editor.component.scss',
})
export class ConfEditorComponent {
  editorOptions = { theme: 'vs-dark', language: 'json', automaticLayout: true };

  constructor(
    public dialogRef: MatDialogRef<ConfEditorComponent>,
    @Inject(MAT_DIALOG_DATA)
    public data: {
      name: string;
      code: string;
    }
  ) {}
}

angular.json

...
"assets": [
...
              {
                "glob": "**/*",
                "input": "node_modules/monaco-editor",
                "output": "/assets/monaco/"
              }
...

Now i’m trying to integrate it with monaco-yaml to be able to write yaml code.

To to so, I’ve added
angular.json

...
"assets": [
...
              {
                "glob": "yaml.worker.js",
                "input": "node_modules/monaco-yaml",
                "output": "/assets/monaco-yaml/"
              }

From what I understand, I have to:

1. Create web workers with something like

  window.MonacoEnvironment = {
    getWorker(moduleId, label) {
      console.log(`getWorker(${moduleId}, ${label})`);
      switch (label) {
        case 'editorWorkerService':
          return new Worker('/assets/monaco/esm/vs/editor/editor.worker.js', {
            type: 'module',
          });
        case 'yaml':
          return new Worker('/assets/monaco-yaml/yaml.worker.js', {
            type: 'module',
          });

        default:
          throw new Error(`Unknown label ${label}`);
      }
    },
  };

2. Configure the addon

  configureMonacoYaml(monaco, {
    enableSchemaRequest: true,
    schemas: [
      {
        // If YAML file is opened matching this glob
        fileMatch: ['*'],
        // Then this schema will be downloaded from the internet and used.
        uri: 'http://myserver/foo-schema.json',
        schema: ParserConfSchema,
      },
    ],
  });

But doing so I get a string of errors that seems to be related to the WebWorker creation. How to integrate them together?