在Angular 2中外部化模块

在Angular 2中外部化模块,angular,Angular,因此,我正在开发我的应用程序,我意识到可以将几个模块提取到单独的库中,这些库可以通过NPM安装并在其他应用程序中重用。当前结构如下所示: app/ search/ component1/ component2/ component3/ search.module.ts search.service.ts login/ register/ 假设我想提取搜索,第一步是什么?如何组织这个单独的存储

因此,我正在开发我的应用程序,我意识到可以将几个模块提取到单独的库中,这些库可以通过NPM安装并在其他应用程序中重用。当前结构如下所示:

app/
    search/
        component1/
        component2/
        component3/
        search.module.ts
        search.service.ts
    login/
    register/

假设我想提取
搜索
,第一步是什么?如何组织这个单独的存储库?它是否也有一个
src
dir和一个package.json?有关于这个主题的具体文档吗

也许这次回购会对你有所帮助

这篇博文:

或克隆此回购,并根据需要进行自定义


我向您推荐官方风格指南,该指南在创建模块时向您推荐文件夹结构和一些约定

此外,鉴于我看到您正在起步,我还建议


此工具允许您从命令行创建模块、组件和其他人员,并遵循《样式指南》中的一些规则。

要构建可使用npm安装的外部模块,您应使用以下几种模块加载程序格式之一将源文件捆绑到分发文件夹中:UMD、CJS、AMD、,等等。我推荐UMD作为任何模块加载程序都可以加载的通用工具

如果您想让组件在AOT构建中工作,则需要将JS文件与元数据文件一起部署。您还应该输出.d.ts文件-主要用于在您选择的IDE中提供代码完成支持(即,我更喜欢Vscode)

下面是一个seed示例应用程序,它演示了如何构建可重用的分发模块:

要运行的构建目标是:

gulp module
要发布到npm,请执行以下操作:

npm publish

所有这些约定都与应用程序代码相关,而不是与库代码相关。从我的示例中可以看到,它与Angular的styleguide完美匹配,并且使用Angular-cli。为什么需要.d.ts文件?它们不能从repo中的.ts文件自动生成吗?不过看起来有点旧。这仍然是最佳做法吗?您可以在package.json文件中升级packages版本,或者在我更新的注释中克隆repo<代码>这仍然是最佳实践吗?->是的,Angular v4仍然向后兼容Angular v2