Angular 可重用模块和组件

Question

与 Angular 2+ 共享可重用代码的正确/最佳方式是什么？我目前正在使用 Angular 4、VSCode、TypeScript、npm 和 Angular CLI。我是一名高级 C# 开发人员，拥有一些我想要升级的 Angular 1.3 应用程序。我正在努力加快 Angular 2+ 的速度。我目前专注于如何正确构建可以从重用中受益的大型应用程序。

我已经完成了 PluralSite 课程（使用 Angular 构建响应式 SPA 框架）并且有一个简单的站点工作（只是前端）。我喜欢“SPA 框架”和应用程序之间的概念分离，并且可以看到发展/扩展和重用框架会非常好。

我试图弄清楚如何分离 SPA 框架，然后在多个应用程序中使用它，从而只维护 SPA 框架代码的一个副本。如果我能够成功地获得我所追求的分离和重用，我可能会非常专注于构建可重用的代码，这通常包含 60% 以上的企业级应用程序。我在下面提供了一些更详细的信息和一些具体问题。

我已经能够从新应用程序中成功“引用”（并因此导入）SPA 框架的 TypeScript 代码，但我无法成功构建或运行。在这一点上，我没有任何有用的输出可以分享，但是我所看到的发生的事情让我相信我没有接近正确的方法。

文件结构是独立的，这意味着应用程序文件夹结构中不存在 SPA 框架文件夹结构。遵循 PluralSite 课程产生了一个结构，其中应用程序和 SPA 框架在项目结构中处于“同一级别”（对等文件夹）。Typescript 构建（由 Angular CLI 驱动）同时发生并引用了一个“node_modules”文件夹。

问题

1. 我如何开发和构建 SPA 框架代码（以及其他类似的“可共享”组件）作为一个单独的项目并具有单独的 node_modules 依赖项（我假设这是可取的）？我假设 SPA 框架能够独立构建，但应用程序将依赖于 SPA 框架。我希望能够创建一个新的“应用程序 2”，而不必复制 SPA 框架的代码。

2. 我假设当我最终构建 app1 或 app2（等等...... 3、4、5 等）时，构建将引用应用程序的 node_module 依赖项，而我不会（当我构建时应用程序）独立和单独构建 SPA 框架。

本质上是在寻找一种方法来单独管理代码并利用 SPA 框架（和其他可重用代码），而无需嵌入代码和维护变体。

任何援助将不胜感激。

Answer 1

这就是我如何实现你所寻求的。

1. 创建一个新的角度项目（我建议使用angular-cli但你不必这样做）
2. 在此处添加您想要在应用程序之间共享的代码。例如，我创建了一个共享组件项目。
3. 遵循 Angular 包格式以保持一致性。
4. 我用来ng-packagr构建和打包我的项目。（https://github.com/dherges/ng-packagr）
5. 将您的项目发布到 NPM（甚至私有 NPM 存储库）
6. 现在，在您的应用程序中，您只需将npm install YOUR_SHARED_PROJECT_NAME共享项目包含在您的应用程序中