MonacoEditor + AngularCli

monaco-editor.component.html

<!-- Make sure to specify width and height -->
<div id='editor' #editor class="monaco-editor" style="width: 100%; height: 100%"></div>

monaco-editor.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

declare const monaco: any;
declare const require: any;

@Component({
	selector: 'at-monaco-editor',
	templateUrl: './monaco-editor.component.html',
	styleUrls: ['./monaco-editor.component.scss']
})
export class MonacoEditorComponent implements AfterViewInit {
	@ViewChild('editor')
	editorContent: ElementRef;

	ngAfterViewInit(): void {
		// Load AMD loader if necessary
		if (!(<any>window).require) {
			const loaderScript = document.createElement('script');
			loaderScript.type = 'text/javascript';
			loaderScript.src = 'assets/monaco/vs/loader.js';
			loaderScript.addEventListener('load', this.onGotAmdLoader);
			document.body.appendChild(loaderScript);
		} else {
			this.onGotAmdLoader();
		}
	}

	private onGotAmdLoader = () => {
		// Load monaco
		(<any>window).require.config({ paths: { vs: 'assets/monaco/vs' } });
		(<any>window).require(['vs/editor/editor.main'], () => {
			this.initMonaco();
		});
	};

	// Will be called once monaco library is available
	private initMonaco() {
		const myDiv: HTMLDivElement = this.editorContent.nativeElement;
		const editor = monaco.editor.create(myDiv, {
			value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
			language: 'javascript',
			theme: 'vs-dark'
		});
	}
}

MonacoEditor + AngularCli.md

Example on how to integrate MonacoEditor with AngularCLI project.

npm i -S monaco-editor

zAngular.json

"build": {
  ...
  "options": {
    ...
    "assets": [
      ...
      {
        "glob": "**/*",
        "input": "node_modules/monaco-editor/min/vs",
        "output": "assets/monaco/vs"
      }
    ],
    ...
  }
}