How to write Angular2 npm module - Angular2 RC 6

Question

I can't get my head around how to write a npm module for angular2.
Even though I found 2 tutorials (One, Two) there's none covering how to implement a angular2 module (@NgModule) as npm package.

What I don't understand, when exactly do I need to inject the module like the BrowserModule for example? Do I even have to inject it with my module or is it enough to just inject the directives?

My Plugin so far:
- https://github.com/yves-s/ng2-flexbox-grid/tree/develop
- https://www.npmjs.com/package/ng2-flexbox-grid

Currently it's a copy and update to RC6 of @btmorton's angular2-grid

But I can't get it to work.

UPDATE:

This is the current state of my module ng2-flexbox-grid.ts

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) => Object.keys(obj).map(key => obj[key]);
// const directives = mapValuesToArray(directiveItems);

export default {
    directives: [NgGrid, NgGridItem]
}

@NgModule({
    declarations: [],
    imports: [
        BrowserModule,
        CommonModule
    ],
    exports: [NgGrid, NgGridItem]
})
export class Ng2FlexboxGridModule {}

---

UPDATE - Solution

With the help of @Clint I could bring that baby home.

Probably the biggest problem was that I wasn't aware of how exactly @NgModule works. And I'm pretty sure it would have helped if I had carefully read the @NgModule docs

The important part though is to declare and export the modules directives. With that you just have to import the FlexboxGridModule to use it's exported directives.

Export:

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 {}

Import:

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 {}

Answer 1

When you make a module, you should be sure that it imports the modules and declares the components that it uses, as well as export anything that should be available to consumers. Ex:

@NgModule({
  imports: [...modulesImConsuming],
  exports: [...modulesAndComponentsMyConsumersNeed],
  declarations: [...myModulesComponents]
})

In your instance, we would have (note the declarations change):

@NgModule({
    declarations: [NgGrid, NgGridItem],
    imports: [
        BrowserModule,
        CommonModule
    ],
    exports: [NgGrid, NgGridItem]
})

Then to consume our module, we just need to import it. When importing a module we get access to all components (NgGrid, NgGridItem) as well as any modules (and everything the exported module exports and so on) that are exported. In your case we would have:

@NgModule({
  imports: [FlexboxGridModule]
})

Answer 2

@NgModule and npm package serve a different purpose. @NgModule is a facility for angular2 to encapsulate and load directives or filter dynamically.

Npm package is a facillity to package and distribute your code in an uniform way. There is no relation whatsoever between the two (npm and NgModule).

I suggest you first write your NgModule without caring about Npm and test it in your application. Once it works ok. You can then add publish you module as a npm package.