Integrare la libreria ng2-ace in un progetto angular-cli (angular2) appena creato utilizzando SystemJS

Question

Ho appena creato un progetto angular2 con l'ultimo strumento angular-cli. Ora voglio far funzionare l'editor di assi usando la libreria ng2-ace. Voglio farlo in un approccio pulito usando SystemJS come caricatore di moduli.

ho fatto

npm install --save ng2-ace 

poi ho aggiunto le seguenti due righe angular-cli-builds.js al vendorNpmFiles matrice

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

poi ho aggiunto quanto segue per 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' 
    } 
}; 

Ora ho provato importazione della direttiva da un componente

import { AceEditorDirective } from 'ng2-ace'; 

Questo rende il compilatore ng serve abortire con il seguente errore:

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

ho cercato di seguire il Leggimi dalla angolare cli e ottenuto la libreria di design materiale google lavoro. Tuttavia, non so cosa faccio di sbagliato quando provo a caricare la libreria ng2-asso.

Answer 1

Penso che la ragione sia così difficile è che non è stata fornita alcuna libreria di dattilografia. Sono stato in grado di ottenere l'equivalente di questo lavoro aggiungendo alcune cose. La mia versione ha una configurazione abbastanza statica ma puoi migliorarla.

system-config ha bisogno di questo:

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

può anche avere bisogno:

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' 
    } 
}; 

Poi si anche bisogno di aggiungere queste cose come dipendenze NPM in angolari-CLI-build.js:

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' 
] 
}); 

Questo praticamente ti offre tutto ciò che ti serve per quanto riguarda le dipendenze. A questo punto ho aggiunto la mia direttiva. Le parti importanti sono qui:

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

Ora importazione stesso bretelle più qualunque modalità e temi che verrà utilizzato:

import 'brace'; 
declare let ace; 

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

Il 'dichiarare lasciare ace' ti permette di avere accesso alla brace, anche se non c'è digitazioni e non è un vero modulo dattiloscritto.

Ho chiamato la mia direttiva 'js-editor' e la allego ad un tag di altezza e larghezza appropriate. I documenti per parentesi dicono di applicare uno stile "blocco" anche al div. Quindi dichiarare la direttiva:

@Directive({ 
    selector: '[js-editor]', 
    inputs: ['text'], 
    outputs: ['textChanged', 'editorRef'] 
}) 
export class JsEditor { 

    editor : any; 
    textChanged : EventEmitter<any>; 
    editorRef : EventEmitter<any>; 
    value : string; 

    set text(value) { 
    // if(value === this.oldVal) return; 
    // this.editor.setValue(value); 
    // this.editor.clearSelection(); 
    this.editor.focus(); 
    } 

    constructor(elementRef : ElementRef) { 
    this.textChanged = new EventEmitter(); 
    this.editorRef = new EventEmitter(); 

    const el = elementRef.nativeElement; 
    el.classList.add('editor'); 

L'impostazione del percorso di base è l'elemento chiave per rinforzare la possibilità di trovare modalità e temi. Questo è davvero il posto sbagliato per impostarlo - dovrebbe essere fatto globalmente, e SOLO UNA VOLTA ...ma questo era solo un esperimento per vedere se avrebbe funzionato così ho fatto qui:

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

Infine, creare l'editor:

this.editor = ace.edit(el); 

e quindi impostare la modalità e il tema. Nota che queste modalità/temi sembrano percorsi, ma in realtà non lo sono. Ace (o forse Brace) utilizzeranno queste stringhe per generare il percorso utilizzando il basePath sopra:

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 */ 
    }); 
    } 
} 

Questa è l'idea generale. Ha davvero bisogno di essere racchiuso in una bella direttiva configurabile lungo le linee di ng2-ace ma non sono il ragazzo giusto per farlo, volevo solo farti andare nella giusta direzione.

--Chris