How to write Angular2 npm module - Angular2 RC 6

Question

I cannot figure out how to write an npm module for angular2.
Despite the fact that I found 2 tutorials ( One , Two ), there is no description of how to implement the angular2 module ( @NgModule ) as an npm package.

What I don’t understand when I need, for example, to introduce a module, for example, BrowserModule ? Do I even need to insert it using my module or is it enough to just enter directives?

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

He is currently copying and updating RC6 from @btmorton angular2-grid

But I can’t make it work.

UPDATE:

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

 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 @Clint, I could bring this baby home.

Probably the biggest problem was that I did not know how @NgModule works. And I'm sure this would help if I carefully read @NgModule docs

The important part is to declare and export module directives. To do this, you just need to import the FlexboxGridModule in order to use the 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

Your project must have an NgModule. Then your module should export all the modules that declare your directives that you want to open. I created an angular 2 component library that does just that. It's pretty simple, I suggest you take a look.

https://github.com/cpamp/ng-bcomponents

If you are interested in learning about changes without modules for using modules, you can view this commit

https://github.com/cpamp/ng-bcomponents/commit/f619d48de7fff35012660229a8bd43244d38baa2

UPDATE

When you create a module, you must be sure that it imports the modules and declares the components that it uses, as well as exports everything that should be available to consumers. In your code, the declarations property has an empty array. It should look like this:

 declarations: [NgGrid, NgGridItem], 

Another problem is how you consume the library. In a project where you consume Ng2FlexboxGridModule , all you have to do is add the Ng2FlexboxGridModule to your imports, you should not add components that are part of the imported module to your application declarations. You access the components of the imported modules by simply importing the module.

Answer 2

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

The Npm package is a simplification to package and distribute your code in a single key. There is no between these two relationships (npm and NgModule).

I suggest you write your NgModule first without caring about Npm and test it in your application. As soon as it works fine. Then you can add the publish module as an npm package.

Answer 3

You do not have to import the BrowserModule twice. You should only import this into the AppModule, as described here: Angular2 Docs . I assume you want your npm module to be lazy.