Dynastech Angular Monaco Editor

Install

yarn add @dynastech/angular-monaco-editor monaco-editor

yarn add @angular-builders/custom-webpack monaco-editor-webpack-plugin

Import Module

import { DgMonacoEditorModule } from '@dynastech/angular-monaco-editor';

@NgModule({
  imports: [DgMonacoEditorModule]
})
export class AppModule { }

Import Style

@use '@dynastech/angular-monaco-editor/themes/monaco-editor';

@import '~monaco-editor/dev/vs/editor/editor.main.css';

Create extra-webpack.config.js

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");

module.exports = {
  plugins: [
    new MonacoWebpackPlugin()
  ],
};

Modify angular.json

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      },
      ...
    },
    ...
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "my-project:build"
    },
    ...
  },
  ...
}