Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

AngularJS integration

See original GitHub issue

Does anyone have a working example of using Monaco with AngularJS? I got the basic example of Monaco to work with this code:

        require.config({
            paths: { 'vs': 'file:///path_to_project/bower_components/monaco-editor/release/min/vs/' }
        });

	require(['vs/editor/editor.main'], function() {
		var editor = monaco.editor.create(document.getElementById('container'), {
			value: [
				'function x() {',
				'\tconsole.log("Hello world!");',
				'}'
			].join('\n'),
			language: 'javascript'
		});
	});

Trying to translate this to an AngularJS directive:

angular
      .module('mymodule')
      .directive('monacoEditor', monacoEditor);

    function monacoEditor() {
        require.config({
            paths: { 'vs': 'http://localhost:20000/bower_components/monaco-editor/release/min/vs' }
        });
        require(['vs/editor/editor.main'], function () {
            console.log(monaco);
            var editor = monaco.editor.create(document.getElementById('container'), {
                value: [
                    'function x() {',
                    '\tconsole.log("Hello world!");',
                    '}'
                ].join('\n'),
                language: 'javascript'
            });
        });
        var directive = {
            ...
        };

        return directive;
    }

However monaco is always undefined.

I have checked that http://localhost:20000/bower_components/monaco-editor/release/min/vs/editor/editor.main.js can definitely be accessed by the browser. Is this an issue of ‘http://’ vs. ‘file:///’? If the second require is failing to load the editor and leaves monaco undefined, how can I see what the error is?

Issue Analytics

State:
Created 6 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

rebornixcommented, Aug 9, 2017

Haven’t played with Monaco in AngularJS 1.x for two years but if I remember correctly, NG 1.x has its own require so it overrides our amd-loader’s require. To make it work smoothly, you can do

AMD load Angular 1.x http://marcoslin.github.io/angularAMD/#/home
Hold a reference to Monaco’s require before loading angularjs. For example, add a script block var monacoRequire = global.require before loading angularjs.

1reaction

jack-armscommented, Aug 9, 2017

I have been able to get Monaco to work with angular to some degree by doing the sync load of Monaco rather than the code I posted above. At the beginning of <body> I put:

<script>var require = { paths: { 'vs': '../node_modules/monaco-editor/dev/vs' } };</script>
<script src="../node_modules/monaco-editor/dev/vs/loader.js"></script>
<script src="../node_modules/monaco-editor/dev/vs/editor/editor.main.nls.js"></script>
<script src="../node_modules/monaco-editor/dev/vs/editor/editor.main.js"></script>
<script src="../node_modules/monaco-editor/dev/vs/basic-languages/src/sql.js"></script>

and in <head> I put:

<link rel="stylesheet" data-name="vs/editor/editor.main" href="../node_modules/monaco-editor/dev/vs/editor/editor.main.css" />

And this makes monaco a global variable. I Then I make this a constant for my module:

angular
      .module('mymodule')
      .constant('monaco', monaco)

So that it can be injected into other places in the normal angular way. You can make a directive that uses a link function to create an editor around the element the directive is attached to, so you can write something like:

<div class="monaco-container" monaco-editor={...}></div>

I’m not able to load the languages I need dynamically, so I just put the script tag with the editor stuff for SQL in the body along with the other scripts. Still trying to integrate this process in with gulp as this definitely does not seem like the best way to load Monaco, but it at least works.

Top Results From Across the Web

AngularJS: API: API Reference

Use ngAnimate to enable animation features within your application. Various core AngularJS directives will provide animation hooks into your application when ...

AngularJS integration | Docs - TinyMCE

Integration with AngularJS is currently done through angular-ui-tinymce a third party module. This how-to shows you how to setup a project using AngularJS...

Integration with AngularJS (v1.x) - Flexmonster

This tutorial will help you integrate the pivot table with the AngularJS framework. To integrate Flexmonster with the Angular framework, see integration ......

Introduction to AngularJS - W3Schools

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives,...

AngularJS 1.x for Angular - Sentry Documentation

x , you can use Sentry's AngularJS integration. Discontinued support for AngularJS 1.x. From version 7 onwards, the Sentry JavaScript SDK will not...