title: How to write Angular2 npm module - Angular2 RC 6
body: <p>I can't get my head around how to write a npm module for angular2.<br>
  Even though I found 2 tutorials (<a href="https://medium.com/@OCombe/how-to-publish-a-library-for-angular-2-on-npm-5f48cdabf435#.kjtgsahnt">One</a>, <a href="http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/">Two</a>) there's none covering how to implement a angular2 module (<code>@NgModule</code>) as npm package.</p>
  
  <p>What I don't understand, when exactly do I need to inject the module like the <code>BrowserModule</code> for example? Do I even have to inject it with my module or is it enough to just inject the directives?</p>
  
  <p>My Plugin so far:<br>
  - <a href="https://github.com/yves-s/ng2-flexbox-grid/tree/develop">https://github.com/yves-s/ng2-flexbox-grid/tree/develop</a><br>
  - <a href="https://www.npmjs.com/package/ng2-flexbox-grid">https://www.npmjs.com/package/ng2-flexbox-grid</a></p>
  
  <p>Currently it's a copy and update to RC6 of @btmorton's <a href="https://www.npmjs.com/package/angular2-grid">angular2-grid</a></p>
  
  <p>But I can't get it to work.</p>
  
  <p><strong>UPDATE:</strong>  </p>
  
  <p>This is the current state of my module <a href="https://github.com/yves-s/ng2-flexbox-grid/blob/develop/ng2-flexbox-grid.ts">ng2-flexbox-grid.ts</a> </p>
  
  <pre><code>export * from './src/directives';
  export * from './src/components';
  export * from './src/interfaces';
  
  import {BrowserModule} from '@angular/platform-browser';
  import {NgModule} from '@angular/core';
  import {CommonModule} from '@angular/common';
  
  import {NgGrid, NgGridItem}  from './src/directives';
  
  const mapValuesToArray = (obj) =&gt; Object.keys(obj).map(key =&gt; obj[key]);
  // const directives = mapValuesToArray(directiveItems);
  
  export default {
      directives: [NgGrid, NgGridItem]
  }
  
  @NgModule({
      declarations: [],
      imports: [
          BrowserModule,
          CommonModule
      ],
      exports: [NgGrid, NgGridItem]
  })
  export class Ng2FlexboxGridModule {}
  </code></pre>
  
  <hr>
  
  <p><strong>UPDATE - Solution</strong></p>
  
  <p>With the help of @Clint I could bring that baby home.</p>
  
  <p>Probably the biggest problem was that I wasn't aware of how exactly <code>@NgModule</code> works. And I'm pretty sure it would have helped if I had carefully read the <a href="https://angular.io/docs/ts/latest/guide/ngmodule.html"><code>@NgModule</code> docs</a></p>
  
  <p>The important part though is to declare and export the modules directives. With that you just have to import the <code>FlexboxGridModule</code> to use it's exported directives.</p>
  
  <p><strong>Export:</strong></p>
  
  <pre><code>import {BrowserModule} from '@angular/platform-browser';
  import {NgModule} from '@angular/core';
  import {NgGrid, NgGridItem} from './src/directives';
  
  @NgModule({
      imports: [BrowserModule],
      declarations: [NgGrid, NgGridItem],
      exports: [NgGrid, NgGridItem]
  })
  export class FlexboxGridModule {}
  </code></pre>
  
  <p><strong>Import:</strong></p>
  
  <pre><code>import {NgModule}      from '@angular/core';
  import {BrowserModule} from '@angular/platform-browser';
  
  import {AppComponent}   from './app.component';
  import {FlexboxGridModule} from "ng2-flexbox-grid";
  
  @NgModule({
      imports: [
          BrowserModule,
          FlexboxGridModule
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>