Angular Import external JS libray containing define

Question

I successfully imported a third party library (Eclipse Orion editor) in my Angular app and it works fine - I can edit text and work with it. However, because of the Uncaught ReferenceError: define is not defined. The editor isn't able to load the sytax highlighting.

I already tried to include requirejs but in doing so the app didn't even start anymore.

I included the following lines in my angular-cli.json:

"scripts": [
    "../orion/editor/stylers/lib/syntax.js",
    "../orion/editor/stylers/application_xml/syntax.js",
    "../orion/editor/built-editor.min.js"
],

And in my component providing the editor:

ngOnInit() {
    System.import('../../../orion/editor/stylers/lib/syntax.js');    
    System.import('../../../orion/editor/stylers/application_xml/syntax.js');
    System.import('../../../orion/editor/built-editor.js')
        .then((o: any) => {
            this.orionEditor = o({
                document: document, className: 'editor', parent: 'xml', content-type: 'application/xml'
            })[0];
            this.orionEditor.setText(this.innerValue);
        });
}

All of this works fine, except that the define is not defined error and the thereupon following Error: undefined missing orion/editor/stylers/application_xml/syntax error.

Does anyone has experience in loading libraries which use requirejs in Angular and can help me here?

A simple example demonstrating this issue is available on GitHub.