Интеграция библиотеки ng2-ace в недавно созданный проект angular-cli (angular2) с использованием SystemJS

Question

Я только что создал проект angular2 с помощью новейшего инструмента angular-cli. Теперь я хочу, чтобы редактор туза работал и работал с помощью библиотеки ng2-ace. Я хочу сделать это с помощью чистого подхода, используя SystemJS в качестве загрузчика модуля.

Я сделал

npm install --save ng2-ace 

Затем я добавил следующие две строки angular-cli-builds.js в vendorNpmFiles массиве

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

Затем я добавил следующее 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' 
    } 
}; 

Теперь я попытался импортирование директивы из компонента

import { AceEditorDirective } from 'ng2-ace'; 

Это делает компилятор ng serve прерывание со следующей ошибкой:

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

Я пытался следовать Readme от углового-кли и получил материальную дизайн библиотеки Google работает. Тем не менее, я не знаю, что я делаю неправильно, пытаясь загрузить библиотеку ng2-ace.

Answer 1

Я думаю, причина в том, что это так сложно, так это то, что нет типичной библиотеки. Я смог получить приблизительный эквивалент этой работы, добавив несколько вещей. Моя версия имеет довольно старую конфигурацию, но вы можете ее улучшить.

система конфигурация нуждается в этом:

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

это также может понадобиться:

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

Затем необходимо также добавить эти вещи, как зависимости НПХ в угловом-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' 
] 
}); 

Это в значительной степени дает вам все, что вам нужно, в зависимости от зависимостей. На данный момент я добавил свою собственную директиву. Важные части здесь:

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

Теперь импорт сам фигурных скобок плюс все режимы и темы, которые вы будете использовать:

import 'brace'; 
declare let ace; 

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

«объявить пусть Туз» позволяет вам иметь доступ не скобки, даже если там нет и это не настоящий тип машинописного модуля.

Я назвал свою директиву «js-editor», и вы прикрепляете ее к тегу соответствующей высоты и ширины. Документы для скобки говорят, чтобы применить стиль «block» к div. Затем объявите директиву:

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

Установка базового пути является ключевым элементом, позволяющим находить режимы и темы. Это действительно неправильное место для его установки - это нужно делать глобально, а ТОЛЬКО ОДИН РАЗ ...но это был просто эксперимент, чтобы увидеть, если он будет работать, так что я сделал это здесь:

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

Наконец, создать редактор:

this.editor = ace.edit(el); 

, а затем установить свой режим и тему. Обратите внимание, что эти режимы/темы LOOK похожи на пути, но на самом деле это не так. Ace (или, возможно, Brace) будет использовать эти строки для создания пути, используя BasePath выше:

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

Это общая идея. Это действительно нужно обернуть в красивую настраиваемую директиву вдоль линий ng2-ace, но я не тот парень, который это сделал, я просто хотел, чтобы вы направились в правильном направлении.

--Chris