Clarification On Documentation +Working With Webpack

Hi There @fxmontigny,

Great work with this component. I’ve gotten this all working with Angular 2.0.1 and webpack. Sharing my experiences here so that other users may benefit and so that you may potentially update your documentation?:

Inclusion and Use In Project

• “AceEditorComponent” and “AceEditorDirective” should be included in your app module under declarations. No need to add as a directive within your own component.

Use with Webpack

With respect to webpack, the ace-builds version you’ve made your project a dependancy will not work. However instead users can use brace which is a current implementation (refactored) of ace-builds specifically made to work with browserify and seems to be well maintained:

• brace on npm
• brace on github

It seems to also work with webpack without issue. Once brace is installed, either within the component where ng2-ace-editor is used or inside their vendor.js file brace can be imported so that it is included in the webpack bundle like so (in my case I am using json mode and the eclipse theme):

// for Ace-Editor that can be used within webpack (brace)
import "brace";
import "brace/mode/json";
import "brace/theme/eclipse";

[jmls]

@mashaalmemon I was wondering if you had an example of how to use this project and brace together in angular-cli which now uses webpack ?

[yossely]

Hi! I finally got it!

My systemjs.config.js was just fine with the lines that I’d already added:

map: {
   ... ,
      'ng2-ace-editor': 'npm:ng2-ace-editor',
      'brace': 'npm:brace',
      'w3c-blob': 'npm:w3c-blob/index.js',
      'buffer': 'npm:buffer/index.js',
      'base64-js': 'npm:base64-js/index.js',
      'ieee754': 'npm:ieee754/index.js',
},
packages: {
   ... , 
   'ng2-ace-editor':{
      main: 'ng2-ace-editor',
      defaultExtension: 'js'
    },
    'brace': {
      main: 'index',
      defaultExtension: 'js'
    }
}

I had to import some packages in my angular module and my angular component:

Module

/**
 * Imports needed to create and configure Ace Code Editor 
 */
import 'brace';
import { AceEditorComponent } from 'ng2-ace-editor';

Component

import 'brace';
import 'brace/theme/clouds';
import 'brace/mode/c_cpp';

And in my component I finally could manipulate my code editor like this:

...
    @ViewChild('editor') editor;

    ngOnInit(){
        this.codeEditorOptions = {
                maxLines: 10, 
                printMargin: true
            };
    }

    onChangeCodeInsideEditor(code){
        console.log('on change code inside editor: ',code);
    }

    ngAfterViewInit(){
        this.editor.setTheme("clouds");
        this.editor.setMode("c_cpp"); 
        this.editor.getEditor().$blockScrolling = Infinity;
    }
...

The respective template for my component looks like this:

<ace-editor 
        #editor
        class="code-editor"
        [text]="problem.code"
        [options]="codeEditorOptions" 
        (textChanged)="onChangeCodeInsideEditor($event)">
</ace-editor>