Zintegruj bibliotekę ng2-ace ze świeżo utworzonym projektem kątowym-cli (kątowym2) przy użyciu SystemJS

Question

Właśnie utworzyłem projekt kątowy2 z najnowszym narzędziem angular-cli. Chcę teraz uruchomić edytor asa przy użyciu biblioteki ng2-ace. Chcę to zrobić w czystym podejściu, używając SystemJS jako modułu ładującego moduły.

zrobiłem

npm install --save ng2-ace 

potem dodałem następujące dwa wiersze do angular-cli-builds.js do tablicy

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

następnie vendorNpmFiles I dodaje następujące do 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' 
    } 
}; 

Teraz próbowałem importowanie dyrektywy ze składnika

import { AceEditorDirective } from 'ng2-ace'; 

To sprawia, że ​​kompilator ng serve przerwaniu z powodu następującego błędu:

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

Próbowałem śledzić Readme z kątowym-cli i dostał biblioteki materiałów projektowania google roboczą. Jednak nie wiem, co robię źle podczas próby ładowania biblioteki ng2-ace.

Answer 1

Myślę, że powodem, dla którego jest to tak trudne, jest brak biblioteki typowania. Udało mi się uzyskać przybliżony ekwiwalent tego działania, dodając kilka rzeczy. Moja wersja ma dość statyczną konfigurację, ale możesz ją ulepszyć.

system-config tego potrzebuje:

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

może również potrzebować:

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

Następnie trzeba także dodać te rzeczy jako zależności KMP w kanciastych-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' 
] 
}); 

To prawie wszystko, czego potrzebujesz, jeśli chodzi o zależności. W tym momencie dodałem własną dyrektywę. Ważnymi części są tutaj:

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

teraz importować sam usztywnień oraz cokolwiek tryby i tematów będzie na podstawie:

import 'brace'; 
declare let ace; 

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

do „zadeklarować niech ace” pozwala mieć dostęp do klamra, chociaż nie ma typowania i nie jest to prawdziwy moduł do maszynopisu.

Nazwałem moją dyrektywę "js-editor", a następnie dołączasz ją do znacznika o odpowiedniej wysokości i szerokości. Dokumenty do nawiasów klamrowych mówią o zastosowaniu stylu blokowego również do div. Następnie zadeklaruj dyrektywę:

@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'); 

Ustawienie ścieżki bazowej jest kluczowym elementem, który pozwala wyszukiwać tryby i motywy. To naprawdę złe miejsce, aby to ustawić - powinno to być zrobione globalnie i TYLKO RAZ ...ale był to tylko eksperyment, aby sprawdzić, czy to działa, więc zrobiłem to tutaj:

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

Wreszcie stworzenie edytora:

this.editor = ace.edit(el); 

a następnie ustawić tryb i motyw. Zwróć uwagę, że te tryby/motywy wyglądają jak ścieżki, ale tak naprawdę nie są. As (lub być może Brace) użyje tych ciągów do wygenerowania ścieżki za pomocą powyższej ścieżki bazowej:

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

To ogólna idea. To naprawdę musi być zawarte w ładnej, konfigurowalnej dyrektywie zgodnej z ng2-acem, ale nie jestem odpowiednim facetem, który to zrobi, po prostu chciałem skierować cię we właściwym kierunku.

--Chris