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

Question

我刚刚使用最新的 angular-cli tool. I now want to get the ace editor up and running using the ng2-ace 库创建了一个 angular2 项目。我想以一种干净的方式使用 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 中的自述文件并让 google material 设计库正常工作。但是，我不知道我在尝试加载 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';

现在导入 brace 本身以及您将使用的任何模式和主题：

import 'brace';
declare let ace;

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

'declare let ace' 允许您访问 brace，即使没有输入也不是真正的 typescript 模块。

我将我的指令命名为 'js-editor'，您将其附加到具有适当高度和宽度的标签上。大括号的文档说也要对 div 应用 'block' 样式。然后声明指令：

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

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

--克里斯

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

Integrate the ng2-ace library into a freshly created angular-cli (angular2) project using SystemJS

javascript

angularjs

systemjs

angular