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

我刚刚用最新的工具创建了一个angular2项目。现在，我想使用该库启动并运行ace编辑器。我希望使用SystemJS作为模块加载器，以一种干净的方式完成这项工作

是的

npm install --save ng2-ace

然后，我将以下两行添加到

angularcli 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服务
中止，并出现以下错误：

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

我试图遵循angular cli的自述文件，并使google material design库正常工作。然而，我不知道在加载ng2 ace库时我做错了什么。
我认为这之所以如此困难，是因为没有提供打字库。通过添加一些内容，我可以大致了解这项工作。我的版本有一个相当静态的配置，但你可以增强它

系统配置需要：

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”允许您访问大括号，即使没有键入，而且它不是真正的typescript模块

我将指令命名为“js编辑器”，然后将其附加到具有适当高度和宽度的标记上。大括号的文档也要求对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');

最后，创建编辑器：

    this.editor = ace.edit(el);

然后设置你的模式和主题。请注意，这些模式/主题看起来像路径，但实际上并非如此。Ace（或者大括号）将使用上述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的思路包装成一个很好的可配置指令，但我不是这样做的合适人选，我只是想让你朝着正确的方向前进

--克里斯
如果你不确定“声明让”是做什么的，请看这个
    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 */
    });
  }
}