2016-09-04 22 views
6

angular2のnpmモジュールの書き方について頭を下げることはできません。
2つのチュートリアル(OneTwo)が見つかりましたが、npmパッケージとしてangular2モジュール(@NgModule)を実装する方法はありません。Angular2 npmモジュールの書き方 - Angular2 RC 6

私が理解していないことは、正確にはBrowserModuleのようなモジュールを注入する必要があるときですか?それを私のモジュールに注入する必要があるのでしょうか、それとも指示を注入するだけで十分ですか?これまで

私のプラグイン:
- https://github.com/yves-s/ng2-flexbox-grid/tree/develop
- https://www.npmjs.com/package/ng2-flexbox-grid

現在は@ btmortonのangular2-grid

のRC6へのコピーと更新だが、私はそれを動作させることはできません。

UPDATE:

これは私のモジュールの現在の状態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である - 私はそれを持って来ることができる@Clintの助けを借りて解決

ベビーホーム。

おそらく最大の問題は、私が正確に@NgModuleがどのように動作するのか分からなかったことでした。そして、私が慎重に読んだら助けてくれると確信しています。@NgModule docs

重要なのは、モジュールディレクティブを宣言してエクスポートすることです。これで、エクスポートされたディレクティブを使用するにはFlexboxGridModuleをインポートするだけです。

輸出:

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

インポート:あなたは、あなたのプロジェクトにNgModuleを持っている必要があります

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

質問体は解決の場ではありません。ソリューションを回答として提供し、それを最善の答えとすることができます。 – Clint

答えて

2

。あなたのモジュールは、公開したいディレクティブを宣言するすべてのモジュールをエクスポートする必要があります。私は正確にこれを行う角度2コンポーネントライブラリを作った。それはかなり簡単です、私はあなたが一見をお勧めします。

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

あなたはモジュールを使用する無モジュールからの変化について興味があれば、あなたはこのコミット確認することができ

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

UPDATE

あなたはモジュールを作りますモジュールをインポートし、使用するコンポーネントを宣言し、消費可能なものをエクスポートすることを確認する必要がありますers。あなたのコードでは、declarationsプロパティに空の配列があります。これは次のようになります。

declarations: [NgGrid, NgGridItem], 

もう1つ問題は、ライブラリをどのように消費しているかです。 Ng2FlexboxGridModuleを使用するプロジェクトでは、インポートにNg2FlexboxGridModuleを追加するだけです。インポートされたモジュールの一部であるコンポーネントは、アプリケーションの宣言に追加しないでください。モジュールをインポートするだけで、インポートされたモジュールコンポーネントにアクセスできます。

+0

私は今のように宣言し、輸出部に指令を追加: ' @NgModule({ 輸入:[ BrowserModule、 CommonModule]、 宣言:[NgGrid、NgGridItem]、 輸出:[NgGrid、 NgGridItem] }) '' ' しかし、私はまだエラーが出る:「キャッチされない予期しない値『をNgGrid』モジュール『AppModule』で宣言した」私が前にあなたのコメントを読み違え – Yves

+0

@Yves、あなたはあなたの質問には、更新して提供することができますあなたが問題を抱えているコード?あなたのgithubが最新ではないようです。 – Clint

+0

問題はどこにあるのか正確にはわかりません。開発中のgithubリポジトリは最新のものにする必要があります。ルートモジュールはng2-flexbox-grid.tsにありますが、質問を現在の状態で更新します。 – Yves

1

@NgModuleとnpmパッケージは異なる目的を果たします。 @NgModuleは、angular2がディレクティブまたはフィルタを動的にカプセル化してロードする機能です。

Npmパッケージは、コードをパッケージ化して一様な方法で配布する機能です。 2つの間には何の関係もありません(npmとNgModule)。

まず、Npmについて気にせずにNgModuleを作成し、アプリケーションでテストすることをお勧めします。一度それは大丈夫動作します。次に、あなたのモジュールをnpmパッケージとして追加することができます。

0

BrowserModuleを2回インポートしないでください。ここで説明するように、これをAppModuleでインポートする必要があります:Angular2 Docs。私はあなたのnpmモジュールが遅延ロードできるようにしたいと思います。

関連する問題