Integriere die ng2-ace Bibliothek in ein frisch erstelltes angular-cli (angular2) Projekt mit SystemJS

Question

Ich habe gerade ein angular2 Projekt mit dem letzten angular-cli Werkzeug erstellt. Ich möchte jetzt den Ace-Editor mit der ng2-ace-Bibliothek zum Laufen bringen. Ich möchte es sauber und mit SystemJS als Modullader machen.

Ich habe

npm install --save ng2-ace 

dann habe ich die folgenden zwei Zeilen zu angular-cli-builds.js zum vendorNpmFiles Array

'ng2-ace/index.js', 
'brace/**/*.js 

dann den folgenden I hinzugefügt system-config.ts

const map: any = { 
    'ng2-ace': 'vendor/ng2-ace', 
    'brace': 'vendor/brace' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'brace': { 
    format: 'cjs', 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 
    'ng2-ace': { 
    format: 'cjs', 
    defaultExtension: 'js', 
    main: 'index.js' 
    } 
}; 

Jetzt habe ich versucht, Importieren der Richtlinie aus einer Komponente

import { AceEditorDirective } from 'ng2-ace'; 

Dies macht den Compiler ng serve mit folgendem Fehler abgebrochen:

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with: 
Error: Typescript found the following errors: 
Cannot find module 'ng2-ace'. 

Ich habe versucht, die Readme-Datei von Winkel-cli zu folgen und bekam die Design-Bibliothek google Material arbeiten. Ich weiß jedoch nicht, was ich falsch mache, wenn ich versuche, die ng2-ace-Bibliothek zu laden.

Answer 1

Ich denke der Grund dafür ist, dass es keine Typisierungsbibliothek gibt. Ich war in der Lage, das grobe Äquivalent dieser Arbeit zu bekommen, indem ich ein paar Dinge hinzufügte. Meine Version hat eine ziemlich statische Konfiguration, aber Sie können sie verbessern.

system-config muss dies:

const map:any = { 
    'brace': 'vendor/brace', 
    'w3c-blob': 'vendor/w3c-blob', 
    'buffer': 'vendor/buffer-shims' 
}; 

es müssen auch:

const packages:any = { 
    'w3c-blob': { 
    format: 'cjs', 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 

    'brace': { 
    format: 'cjs', 
    defaultExtension: 'js', 
    main: 'index.js' 
    }, 

    'buffer': { 
    format: 'cjs', 
    defaultExtension: 'js', 
    main: 'index.js' 
    } 
}; 

Dann müssen Sie auch diese Dinge als npm Abhängigkeiten in Winkel-cli-build.js hinzufügen:

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     /* your stuff goes here, then add: */ 
     'brace/**/*.js', 
     'w3c-blob/index.js', 
     'buffer-shims/index.js' 
] 
}); 

Das bringt so ziemlich alles, was Sie brauchen, soweit Abhängigkeiten betroffen sind. An dieser Stelle habe ich meine eigene Richtlinie hinzugefügt. Die wichtigen Teile sind hier:

import { Directive, ElementRef, EventEmitter } from '@angular/core'; 

Jetzt importieren Klammer selbst plus was auch immer Modi und Themen Sie werden unter Verwendung:

import 'brace'; 
declare let ace; 

import 'vendor/brace/mode/javascript'; 
import 'vendor/brace/theme/monokai'; 

Die ‚erklären lassen ace‘ können Sie den Zugriff haben sogar verspannen obwohl keine da ist Typings und es ist kein echtes Typoskript-Modul.

Ich habe meine Anweisung 'js-editor' benannt und sie an ein Tag mit entsprechender Höhe und Breite angehängt. Die Dokumente für geschweifte Klammern sagen, dass sie auch einen "Block" -Stil auf das div anwenden sollen. Deklarieren Sie dann die Direktive:

Das Festlegen des Basispfads ist das Schlüsselelement für die Suche nach Modi und Designs. Dies ist wirklich der falsche Ort, um es zu setzen - es sollte global getan werden, und nur einmal ...aber das war nur ein Experiment, um zu sehen, ob es funktionieren würde, so habe ich es hier:

ace.config.set('basePath', 'vendor/brace'); 

Schließlich erstellen Sie den Editor:

this.editor = ace.edit(el); 

und setzen Sie dann Ihren Modus und Thema. Beachten Sie, dass diese Modi/Themen wie Pfade aussehen, aber sie sind es wirklich nicht. Ace (oder vielleicht Brace) diese Saiten verwenden Sie den Pfad mit der basePath oben zu generieren:

this.editor.getSession().setMode('ace/mode/javascript'); 
    this.editor.setTheme('ace/theme/monokai'); 

    setTimeout(() => { 
     this.editorRef.next(this.editor); 
    }); 

    this.editor.on('change',() => { 
     /* do whatever you want here */ 
    }); 
    } 
} 

Das ist die allgemeine Idee. Es muss wirklich in eine schöne konfigurierbare Direktive nach dem Vorbild von ng2-ace verpackt werden, aber ich bin nicht der richtige Mann, um das zu tun, ich wollte dich nur in die richtige Richtung bringen.

--Chris