Angular 可重用模块和组件

Posted 2023-02-23

【中文标题】Angular 可重用模块和组件

【英文标题】：Angular Reusable Modules and Components

【发布时间】：2018-05-18 07:35:08

【问题描述】：

与 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”文件夹。

问题

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

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

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

任何帮助将不胜感激。

【问题讨论】：

NPM 模块应该用于您所询问的内容。在您的情况下，“框架”应该是 NPM 模块 - 或其中的一组。

【参考方案1】：

这就是我如何实现您正在寻找的东西。

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

【讨论】：

同意，节点包是要走的路。我也使用ng-packagr。我还发现真正有用的是npm link我在项目中的共享包，所以我可以“内联”修改它们