如何编写 Angular2 npm 模块 - Angular2 RC 6答案

【问题标题】：How to write Angular2 npm module - Angular2 RC 6如何编写 Angular2 npm 模块 - Angular2 RC 6
【发布时间】：2017-01-12 06:44:06
【问题描述】：

我不知道如何为 angular2 编写 npm 模块。
尽管我找到了 2 篇教程（One、Two），但没有一篇介绍如何将 angular2 模块（@NgModule）实现为 npm 包。

我不明白的是，我什么时候需要注入像BrowserModule 这样的模块？我什至必须将它与我的模块一起注入，还是只注入指令就足够了？

到目前为止我的插件：
- https://github.com/yves-s/ng2-flexbox-grid/tree/develop
- https://www.npmjs.com/package/ng2-flexbox-grid

目前它是@btmorton 的angular2-grid RC6 的副本和更新

但我无法让它工作。

更新：

这是我的模块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 {}

更新 - 解决方案

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

导入：

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

【问题讨论】：

问题主体不是解决方案的地方。您可以提供您的解决方案作为答案并将其标记为最佳答案。

标签： angular npm

【解决方案1】：

当你制作一个模块时，你应该确保它导入了模块并声明了它使用的组件，并导出了任何应该对消费者可用的东西。例如：

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

在您的实例中，我们将有（注意 declarations 更改）：

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

然后要使用我们的模块，我们只需要导入它。导入模块时，我们可以访问所有导出的组件（NgGrid、NgGridItem）以及任何模块（以及导出模块导出的所有内容等）。在您的情况下，我们将：

@NgModule({
  imports: [FlexboxGridModule]
})

【讨论】：

我现在将指令添加到声明和导出部分，例如：``` @NgModule({ imports: [ BrowserModule, CommonModule ], declarations: [NgGrid, NgGridItem], exports: [NgGrid, NgGridItem] ] }) ``` 但是我仍然得到错误：“模块'AppModule'声明的未捕获的意外值'NgGrid'”
@Yves 我之前误读了您的评论，您能否更新您的问题并提供您遇到问题的代码？看来你的 github 不是最新的。
有问题，我不知道问题出在哪里。开发的 github repo 应该是最新的。根模块在 ng2-flexbox-grid.ts 中，但我会用当前状态更新我的问题。
@Yves 查看我的更新答案。您是否也提供用于使用该库的 AppModule？
嘿@Clint，它成功了。感谢您的快速解释，这是我所缺少的。在我从@NgModule 导出NgGrid 和NgGridItem 并导入FlexboxGridModule 之后，我可以开始使用模块指令。我会用解决方案更新我的问题，也许它可以帮助其他人。谢谢！

【解决方案2】：

@NgModule 和 npm 包有不同的用途。 @NgModule 是 angular2 封装和加载指令或动态过滤的工具。

Npm 包是一种以统一方式打包和分发代码的工具。两者（npm 和 NgModule）之间没有任何关系。

我建议你先编写你的 NgModule 而不关心 Npm，然后在你的应用程序中测试它。一旦它工作正常。然后，您可以将您的模块添加为 npm 包。

【讨论】：

【解决方案3】：

您不应两次导入BrowserModule。您只需将其导入 AppModule，如下所述：Angular2 Docs。我假设您确实希望您的 npm 模块能够延迟加载。

【讨论】：