Add Monaco-Editor to Angular 15

Question

im not able to make the monaco-editor work with angular 15, for the sql and autocomplete worker,

i tried to follow the steps in this thread: https://github.com/microsoft/monaco-editor/issues/3553

and added all the Webpack stuff, but i was not able to make it work for sql, heres what i implemented so far:

my Webpack configs are:

    const path = require('path');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    module.exports = {
    entry: {
        app: './index.js',
        'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
        'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
        'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
        'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
        'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            },
            {
                test: /\.ttf$/,
                use: ['file-loader']
            }
        ]
    }
};

my index.js is as follow:

self.MonacoEnvironment = {
    getWorkerUrl: function (moduleId, label) {
        if (label === 'json') {
            return './json.worker.bundle.js';
        }
        if (label === 'css' || label === 'scss' || label === 'less') {
            return './css.worker.bundle.js';
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
            return './html.worker.bundle.js';
        }
        if (label === 'typescript' || label === 'javascript') {
            return './ts.worker.bundle.js';
        }
        return './editor.worker.bundle.js';
    }
};

in my component where i want to use the monaco-editor im adding the following:

    import { AfterViewInit, Component } from '@angular/core';
    import * as monaco from 'monaco-editor';
    import { SqlAutocompleteService } from './services/autocomplete/autocomplete.service';
    ...

    editor: monaco.editor.IStandaloneCodeEditor;

    constructor(
    private autocompleteService: SqlAutocompleteService
    ) {}

    ngAfterViewInit() {
    const element = document.getElementById('editor');

    this.editor = monaco.editor.create(element, {
      value: '',
      // value: testQuery,
      language: 'sql',
      theme: 'vs'
    });

    monaco.languages.registerCompletionItemProvider('sql', {
      provideCompletionItems: (model, position) => {
        return this.autocompleteService.provideCompletionItems(model, position);
         }
        });
      }
     }

and my autocomplete service has the logic for the autocomplete,

my main issue is how to add the sql worker because now i am not able to make it work

Answer 1

You can add these to the config file:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const path = require('path');

module.exports = {
  entry: {
    'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
  },
  output: {
    globalObject: 'self',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['sql'],
    }),
  ],
};

as these is no default worker for the sql, but this should make it work.

and you can use the rest as u are using it right now.