SystemJSを使用して新しく作成したangle-cli（angular2）プロジェクトにng2-aceライブラリを統合

Question

最新のangular-cliツールを使用してangular2プロジェクトを作成しました。 ng2-aceライブラリを使用してエースエディタを起動して実行したいと考えています。私はモジュールローダーとしてSystemJSを使用してきれいなアプローチでそれをしたいです。私は、私はvendorNpmFilesアレイ

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

にangular-cli-builds.jsに次の2行を追加し

npm install --save ng2-ace 

をした

私は私が試し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'. 

私は、角-CLIから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でNPMの依存関係としてこれらの事を追加する必要があります。

システム-configが、この必要があります

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'に名前をつけ、それを適切な高さと幅のタグに付けます。中括弧のためのドキュメントは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のラインに沿って設定可能な指示に包まれる必要がありますが、私はそれを行うには正しい人ではありません。私はちょうどあなたが正しい方向に向かうことを望んでいました。

--Chrisが