Skip to content

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

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
license-banner.txt
Notifications You must be signed in to change notification settings

JulCesWhat/angular5-monaco-editor-loader

Repository files navigation

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

About

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

Topics

Resources

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
license-banner.txt

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published