使用 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

我认为这很难的原因是没有提供类型库。通过添加一些东西，我能够得到大致相当于这个工作的东西。我的版本具有相当静态的配置，但您可以对其进行增强。

系统配置需要这个：

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 的方式封装成一个很好的可配置指令，但我不是这样做的合适人选，我只是想让你朝着正确的方向前进。

--克里斯