Integration with monaco-yaml doesn't work

[kprasad99]

I'm trying to integrate the application with monaco-yaml so that I can enable schema validation for yaml files. However integration with yaml doesn't seem to work. It doen't validate yaml schema and even yaml syntax as well. Below is my app.component.ts and application.html

import { Component, ViewChild } from '@angular/core';
import { filter, take } from 'rxjs/operators';
import {
  MonacoEditorComponent,
  MonacoEditorConstructionOptions,
  MonacoEditorLoaderService,
  MonacoStandaloneCodeEditor,
} from 'projects/ngx-monaco-editor/src/public-api';

import { setDiagnosticsOptions } from 'monaco-yaml';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild(MonacoEditorComponent, { static: false })
  monacoComponent!: MonacoEditorComponent;
  editorOptions: MonacoEditorConstructionOptions = {
    theme: 'vs',
    language: 'yaml',
    minimap: {
      enabled: false,
    },
    lineNumbers: 'off',
    automaticLayout: true,
  };
  code = this.getCode();
  model: any;

  constructor(private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$
      .pipe(
        filter((isLoaded) => isLoaded),
        take(1)
      )
      .subscribe(() => {
        console.log('loaded');
        // this.model = monaco.editor.createModel(jsonCode, "json", modelUri);
        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
          enableSchemaRequest: true,
          validate: true,
          schemas: [
            {
              fileMatch: ['foo.json'], // associate with our model
              schema: {
                type: 'object',
                properties: {
                  scopes: {
                    description: 'something useful here',
                    type: 'array',
                    items: {
                      type: 'object',
                      properties: {
                        include: {
                          type: 'array',
                          items: [
                            {
                              type: 'string',
                            },
                          ],
                        },
                        exclude: {
                          type: 'array',
                          items: [
                            {
                              type: 'string',
                            },
                          ],
                        },
                        asset_types: {
                          type: 'array',
                          items: [
                            {
                              type: 'string',
                            },
                          ],
                        },
                      },
                      required: ['include'],
                    },
                  },
                },
                required: ['scopes'],
              },
            } as any,
          ],
        });
        setDiagnosticsOptions({
          enableSchemaRequest: true,
          // hover: true,
          completion: true,
          validate: true,
          format: true,
          schemas: [
            {
              fileMatch: ['foo.yaml'], // associate with our model
              schema: {
                type: 'object',
                properties: {
                  scopes: {
                    description: 'something useful here',
                    type: 'array',
                    items: {
                      type: 'object',
                      properties: {
                        include: {
                          type: 'array',
                          items: [
                            {
                              type: 'string',
                            },
                          ],
                        },
                        exclude: {
                          type: 'array',
                          items: [
                            {
                              type: 'string',
                            },
                          ],
                        },
                        asset_types: {
                          type: 'array',
                          items: [
                            {
                              type: 'string',
                            },
                          ],
                        },
                      },
                      required: ['include'],
                    },
                  },
                },
                required: ['scopes'],
              },
            } as any,
          ],
        });
      });
  }

  editorInit(editor: MonacoStandaloneCodeEditor) {
    const model = monaco.editor.createModel(
      this.getCode(),
      'yaml',
      monaco.Uri.parse('a://b/foo.yaml')
    );
    editor.setModel(model);
  }

  getCode() {
    return '{}';
  }
}

app.component.html

<div
  fxLayout="column"
  fxLayoutAlign="start stretch"
  fxLayoutGap="10px"
  style="width: 100%; height: 100%;"
>
  <div fxFill>
    <ngx-monaco-editor
      [options]="editorOptions"
      [(ngModel)]="code"
      (init)="editorInit($event)"
    ></ngx-monaco-editor>
  </div>
</div>

Version Info

Angular : 13.3.0 monaco-editor: 0.32.0 monaco-yaml: 4.0.0-alpha.1