# @julceswhat/angular5-monaco-editor-loader

> An awesome angular 5 monaco editor loader.

Latest version **1.0.2** (published 2018-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @julceswhat/angular5-monaco-editor-loader
pnpm add @julceswhat/angular5-monaco-editor-loader
yarn add @julceswhat/angular5-monaco-editor-loader
bun add @julceswhat/angular5-monaco-editor-loader
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-02-24 |
| First published | 2017-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 67.8 KB |
| Known vulnerabilities | 0 (+7 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | JulCesWhat |
| Maintainers | julceswhat |
| Keywords | monaco, monaco-editor, editor, angular, angular5 |

## Links

- npm: https://www.npmjs.com/package/@julceswhat/angular5-monaco-editor-loader
- Repository: https://github.com/JulCesWhat/angular5-monaco-editor-loader
- Issues: https://github.com/JulCesWhat/angular5-monaco-editor-loader/issues
- npm.io page: https://npm.io/package/@julceswhat/angular5-monaco-editor-loader

## Dependencies (3)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.18
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.0.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-02-24
- 1.0.0 — 2017-12-22

## README

# 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](https://github.com/julceswhat/angular5-monaco-editor-loader/blob/master/CHANGELOG.md).

## Contents
* [1 Prerequisites](#1)
* [2 Using webpack](#2)
* [3 Using Angular CLI](#3)
* [4 Using the Library](#4)
* [5 Running the demo app](#5)
* [6 Motivation](#6)

## <a name="1"></a>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...
      }
    })
```

3. If you are creating a component on top of monaco, then just use the directive `*loadMonacoEditor` inside your component's HTML

## <a name="2"></a>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',
         }
     ]),
 ],
 ```

## <a name="3"></a>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": "./"
        }
      ]
```

2. 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": "./"
        }
      ]
```

3. 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.

## <a name="4"></a>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 { }

```

2. 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>
```

3. 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"
    });
  }

}
```

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

## <a name="5"></a>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`

## <a name="6"></a>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](https://github.com/leolorenzoluis/xyz.MonacoEditorLoader) just wasn't working with Angular 5.

## Previous versions
- **Angular v4** &amp; **Angular v2**
    - [Branch](https://github.com/leolorenzoluis/xyz.MonacoEditorLoader)

## License
MIT

---
_Source: https://npm.io/package/@julceswhat/angular5-monaco-editor-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._