title: Integrate the ng2-ace library into a freshly created angular-cli (angular2) project using SystemJS
body: <p>I just created an angular2 project with the latest <a href="https://github.com/angular/angular-cli" rel="nofollow">angular-cli</a>  tool. I now want to get the ace editor up and running using the <a href="https://github.com/seiyria/ng2-ace" rel="nofollow">ng2-ace</a> library. I want to do it in a clean approach using SystemJS as the module loader.</p>
  
  <p>I did </p>
  
  <pre><code>npm install --save ng2-ace
  </code></pre>
  
  <p>then I added the following two lines to <code>angular-cli-builds.js</code> to the <code>vendorNpmFiles</code> array</p>
  
  <pre><code>'ng2-ace/index.js',
  'brace/**/*.js
  </code></pre>
  
  <p>then I added the following to <code>system-config.ts</code></p>
  
  <pre><code> 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'
     }
   };
  </code></pre>
  
  <p>Now I tried importing the directive from a component</p>
  
  <pre><code>import { AceEditorDirective } from 'ng2-ace';
  </code></pre>
  
  <p>This makes the compiler <code>ng serve</code> aborting with the following error:</p>
  
  <pre><code>The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
  Error: Typescript found the following errors:
  Cannot find module 'ng2-ace'.
  </code></pre>
  
  <p>I tried to follow the Readme from angular-cli and got the google material design library working. However, I don't know what I do wrong when trying to load the ng2-ace library.</p>