# @abc.xyz/angular-monaco-editor-loader
> A high quality awesome Angular monaco editor loader. Super lightweight 51 kb only and easy to use. Follows angular lifecycle. No promises or timeouts.
Latest version **13.0.2** (published 2022-01-23) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @abc.xyz/angular-monaco-editor-loader
pnpm add @abc.xyz/angular-monaco-editor-loader
yarn add @abc.xyz/angular-monaco-editor-loader
bun add @abc.xyz/angular-monaco-editor-loader
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 13.0.2 |
| Published | 2022-01-23 |
| First published | 2017-08-15 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 57 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | abc xyz |
| Maintainers | abc.xyz |
| Keywords | monaco, monaco-editor, editor, angular, angular2, angular4, angular5, angular8, angular9, angular10, angular12, angular13 |
## Links
- npm: https://www.npmjs.com/package/@abc.xyz/angular-monaco-editor-loader
- Repository: https://github.com/leolorenzoluis/xyz.MonacoEditorLoader
- Homepage: https://github.com/leolorenzoluis/xyz.MonacoEditorLoader#readme
- Issues: https://github.com/leolorenzoluis/xyz.MonacoEditorLoader/issues
- npm.io page: https://npm.io/package/@abc.xyz/angular-monaco-editor-loader
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.3.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
- 13.0.2 (latest) — 2022-01-23
- 13.0.1 — 2022-01-23
- 13.0.0 — 2022-01-23
- 8.0.13 — 2019-12-02
- 8.0.12 — 2019-12-02
- 8.0.11 — 2019-12-02
- 8.0.10 — 2019-12-02
- 8.0.9 — 2019-11-07
- 8.0.8 — 2019-11-07
- 8.0.7 — 2019-11-07
- 8.0.6 — 2019-11-07
- 8.0.5 — 2019-11-07
- 8.0.4 — 2019-11-07
- 8.0.3 — 2019-11-07
- 8.0.2 — 2019-11-07
- … 11 more at https://npm.io/package/@abc.xyz/angular-monaco-editor-loader/versions
## README
# 🎉🎉🎉 Angular Monaco Editor Loader 🎉🎉🎉
[](https://greenkeeper.io/)
[](https://www.npmjs.com/package/@abc.xyz/angular-monaco-editor-loader)
[](https://travis-ci.org/leolorenzoluis/xyz.MonacoEditorLoader)
Easy to install with the following command:
```
npm i @abc.xyz/angular-monaco-editor-loader
```
An easy to use Monaco Editor Loader Service for Angular! Just add `*loadMonacoEditor` in your HTML Element, and you don't have to worry about timing issues!
If you are looking for Angular 5-7 please see the following release https://github.com/leolorenzoluis/xyz.MonacoEditorLoader/releases/tag/v5.0.0
If you are looking for Angular < 4 please see the following branch https://github.com/leolorenzoluis/xyz.MonacoEditorLoader/tree/angular-4
```
```
With custom monaco-editor path
```
```
# Prerequisites
- Make sure that you are serving `Monaco Editor` in `/assets/monaco-editor/vs`
- 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...
}
})
```
- If you are creating a component on top of monaco, then just use the directive `*loadMonacoEditor` inside your component's HTML
## Using webpack
- If you are using `Webpack` do the following:
```
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/monaco-editor/min/vs',
to: './src/assets/monaco',
}
]),
],
```
## Using Angular CLI
- Modify `angular.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": "./"
}
]
```
# Usage
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 '@abc.xyz/angular-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 { }
```
Just add `*loadMonacoEditor`, so with your custom component where you plan to create your own monaco component. Just add the following:
```
```
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"
});
}
}
```
And that's it! No `timeouts`! No `then`! It just goes with the correct flow in Angular!
# Running the demo app
Make sure you have **Angular CLI** installed!
1. Clone this repository
2. `cd demo`
3. `ng serve`
# Motivation
I did not want to clutter my component or code with `timeouts` or `then` to determine if Monaco has loaded! I also wanna utilize `ReactiveJS` when dealing with these kind of stuff.
Most of the code that was found [here](https://github.com/Microsoft/monaco-editor/issues/18) just wasn't the right timing when to check if Monaco is already loaded.
Sometimes I see hacks from [Covalent](https://github.com/Teradata/covalent-code-editor/blob/develop/src/platform/code-editor/code-editor.component.ts) such as adding `timeouts`. So many timeouts everywhere!
```
if (this._webview) {
if (this._webview.send !== undefined) {
// don't want to keep sending content if event came from IPC, infinite loop
if (!this._fromEditor) {
this._webview.send('setEditorContent', value);
}
this.onEditorValueChange.emit(undefined);
this.onChange.emit(undefined);
this.propagateChange(this._value);
this._fromEditor = false;
} else {
// Editor is not loaded yet, try again in half a second
setTimeout(() => {
this.value = value;
}, 500);
}
}
```
For Angular refer to samples/angular13 angular.json and custom-webpack.js monaco webpack plugin to enable web workers
See more
https://www.digitalocean.com/community/tutorials/angular-custom-webpack-config
---
_Source: https://npm.io/package/@abc.xyz/angular-monaco-editor-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._