在Angular 2中外化模块

时间:2017-03-29 02:28:49

标签: angular

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

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

我想说我想提取search,第一步是什么?我如何组织这个单独的存储库?它还有一个src目录和一个package.json吗?是否有关于此主题的特定文档?

3 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

要构建可以使用npm安装的外部模块,您应该使用以下几种模块加载器格式中的任何一种将源文件捆绑到分发文件夹中:UMD,CJS,AMD等。我建议使用UMD作为其可由任何模块加载器普遍加载。

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

这是一个种子示例应用程序,演示如何构建可重用的模块以进行分发:

https://www.npmjs.com/package/ng2-starter-app

https://github.com/pixelbits-mk/ng2-starter-app

要运行的构建目标是:

gulp module

要发布到npm:

npm publish

答案 2 :(得分:-1)

我建议您使用官方样式指南,建议您在创建模块时使用文件夹结构和一些约定。

https://angular.io/styleguide#!#application-structure-and-angular-modules

另外,当我看到你开始我也会建议

https://github.com/angular/angular-cli

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