/angular5-monaco-editor-loader

An easy and fast way to load monaco editor with Angular 5.

Primary LanguageJavaScriptMIT LicenseMIT

Angular 5 Monaco Editor Loader

Build an Angular 5 application with Monaco Editor.

This library allows you to load Monaco Editor in your Angular v5 apps written in TypeScript, ES6 or ES5. The project is based on the official Angular packages and xyz.MonacoEditorLoader.

Install with the command:

npm i @julceswhat/angular5-monaco-editor-loader

An easy to use Monaco Editor Loader Service for Angular 5! Just add *loadMonacoEditor in your HTML Element, and you don't have to worry about timing issues!

<div *loadMonacoEditor id="container"></div>

With custom monaco-editor path

<div *loadMonacoEditor="'libs/monaco-editor/vs'" id="container"></div>

Get the Changelog.

Contents

1 Prerequisites

  1. Make sure that you are serving Monaco Editor in /assets/monaco-editor/vs

  2. If you are using straight app.component then DO NOT USE the directive. Instead use the following code in app.component.ts:

  constructor(private monaco: MonacoEditorLoaderService) {

  }

  this.monaco.isMonacoLoaded.subscribe(value => {
      if (value) {
        // Initialize monaco...
      }
    })
  1. If you are creating a component on top of monaco, then just use the directive *loadMonacoEditor inside your component's HTML

2 Using webpack

If you are using Webpack do the following:

plugins: [
     new CopyWebpackPlugin([
         {
             from: 'node_modules/monaco-editor/min/vs',
             to: './src/assets/monaco',
         }
     ]),
 ],

3 Using Angular CLI

  1. For development modify .angular-cli.json to the following:
"assets": [
       {
         "glob": "**/*",
         "input": "../node_modules/monaco-editor/dev/",
         "output": "./assets/monaco-editor/"
       },
       {
         "glob": "favicon.ico",
         "input": "./",
         "output": "./"
       }
     ]
  1. For production modify .angular-cli.json to the following: Modify .angular-cli.json to the following:
"assets": [
       {
         "glob": "**/*",
         "input": "../node_modules/monaco-editor/min/",
         "output": "./assets/monaco-editor/"
       },
       {
         "glob": "**/*",
         "input": "../node_modules/monaco-editor/min-maps/",
         "output": "./assets/min-maps/"
       },
       {
         "glob": "favicon.ico",
         "input": "./",
         "output": "./"
       }
     ]
  1. Add /// <reference path="./../node_modules/monaco-editor/monaco.d.ts" /> in you typings.d.ts file to remove monaco editor undefined errors and allow compilation.

4 Usage

  1. In your component's module or app module. Import the following:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MonacoEditorLoaderModule, MonacoEditorLoaderService } from '@julceswhat/angular5-monaco-editor-loader';

import { AppComponent } from './app.component';
import { MonacoEditorComponent } from './monaco-editor/monaco-editor.component';

@NgModule({
  declarations: [
    AppComponent,
    MonacoEditorComponent
  ],
  imports: [
    BrowserModule,
    MonacoEditorLoaderModule <-- Insert this>
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. Just add *loadMonacoEditor, so with your custom component where you plan to create your own monaco component. Just add the following:
<monaco-editor *loadMonacoEditor></monaco-editor>
  1. And in my custom component where I want to host Monaco Editor I just do the following like I expect the Monaco library to be loaded at this point:
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'monaco-editor',
  templateUrl: './monaco-editor.component.html',
  styleUrls: ['./monaco-editor.component.css']
})
export class MonacoEditorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
      noSemanticValidation: true,
      noSyntaxValidation: false
    });

    // compiler options
    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.ES2016,
      allowNonTsExtensions: true
    });

    // extra libraries
    monaco.languages.typescript.javascriptDefaults.addExtraLib([
      'declare class Facts {',
      '    /**',
      '     * Returns the next fact',
      '     */',
      '    static next():string',
      '}',
    ].join('\n'), 'filename/facts.d.ts');

    var jsCode = [
      '"use strict";',
      '',
      "class Chuck {",
      "    greet() {",
      "        return Facts.next();",
      "    }",
      "}"
    ].join('\n');

    monaco.editor.create(document.getElementById("container"), {
      value: jsCode,
      language: "javascript"
    });
  }

}
  1. And that's it! No timeouts! No then! It just goes with the correct flow in Angular!

5 Running the demo app

Make sure you have Angular CLI installed!

  1. Clone this repository
  2. cd demo
  3. npm install
  4. ng serve

6 Motivation

I wanted to use Monaco Editor with my Angular 5 project, but couldn't find any library that would help me with this. Since I couldn't find anything, I decided to refactor a library that worked for previous Angular versions.

Most of the code that was found here just wasn't working with Angular 5.

Previous versions

  • Angular v4 & Angular v2

License

MIT