使用SystemJS将ng2-ace库集成到新创建的angular-cli（angular2）项目中

Question

我刚刚使用最新的angular-cli工具创建了一个angular2项目。 我现在想要使用ng2-ace库来启动和运行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'.

我试图跟随angular-cli的自述文件并让谷歌材料设计库工作。 但是，我不知道在尝试加载ng2-ace库时我做错了什么。

Answer 1

我认为这很难的原因是没有提供打字库。 通过添加一些东西，我能够得到粗略的等效工作。 我的版本有一个非常静态的配置，但你可以增强它。

system-config需要这个：

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

然后你还需要在angular-cli-build.js中将这些东西添加为npm依赖项：

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

'declare let ace'让你可以访问大括号，即使没有打字，也不是真正的打字稿模块。

我将我的指令命名为'js-editor'，然后将其附加到适当高度和宽度的标签上。 大括号的文档说，也可以将“块”样式应用于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);

然后设置您的模式和主题。 请注意，这些模式/主题看起来像路径，但它们确实不是。 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的方式包含在一个很好的可配置指令中，但我不是那样做的合适的人，我只是想让你朝着正确的方向前进。

- 克里斯