Logo

菜单

发布于 2026-01-06 1 阅读
0

如何在项目和应用之间共享 Angular 组件

如何在项目和应用之间共享 Angular 组件

无论独自一人还是作为团队成员，都可以轻松地在 Angular 项目中共享和协作处理组件。

Angular 允许您通过模块化组件构建应用程序，这些组件是 Angular 应用程序最基本的 UI 构建块。在构建多个 Angular 项目或应用程序时，组件可以在它们之间共享和重用，从而加快开发速度并构建更好的模块化应用程序。

本文将介绍如何在不同项目之间共享 Angular 组件。我们将使用bit（GitHub）无缝地将组件从现有项目中隔离和打包，并使用bit.dev在多个项目和应用程序之间共享这些组件。完成后，您的团队成员就可以在任何地方发现、使用甚至开发这些组件。

您可以点击此处了解更多关于使用 Bit 共享 NG 组件的信息，或者亲自尝试一下这个实践教程。欢迎继续阅读以下内容开始学习，如有任何疑问，请随时提出:)

为什么使用Bit来共享 Angular 组件？

使用Bit，您可以快速地将组件从任何项目中分离出来，包括它们的所有设置和依赖项，并在不同的项目和应用程序中使用它们。这意味着可以共享更多组件，并减少开发人员的额外工作量。

例如，GitHub 上有一个很受欢迎的 ngx-bootstrap 库。使用 Bit，只需几分钟，就能将其作为组件集合共享到 bit.dev 上。您也可以对团队的组件执行相同的操作，以便协作构建应用程序。

Angular 组件：轻松跨项目共享Angular 组件：轻松跨项目共享

您可以搜索和发现您的组件，查看可视化快照，并按包大小和依赖项筛选组件，以找到正确的代码。

按上下文、依赖项和包大小搜索组件按上下文、依赖项和包大小搜索组件

在决定将组件应用到项目之前，您可以在实时环境中试用每个组件。这对于团队协作开发多个组件非常有用。

安装前先实际试用每个组件。安装前先实际试用每个组件。

然后，您可以使用 NPM/Yarn 在项目中的每个组件中进行安装，甚至可以使用 Bit 从任何使用该组件的项目进行开发和更新 (:0)。

立即开始，或探索 bit.dev 社区中的组件。

让我们开始吧

让我们来看一个在两个 Angular 应用之间共享组件的实际例子。同样的方法也适用于 100 个组件，而且同样简单。

请注意，建议将每个组件包裹在 ngModule 中。您可以在这里找到更多推荐指南和最佳实践，这里还有一个实用教程可以帮助您快速上手演示应用程序：
* Bit with Angular Tutorial *
*Angular 支持目前处于公开测试阶段。一切应该都能正常运行，但请随时分享任何问题和反馈……*docs.bit.dev

设置位

首先，安装bit-cli，然后转到要共享组件的项目，并初始化 bit 工作区。

$ npm install bit-bin -g
$ cd project-directory
$ bit init
Enter fullscreen mode Exit fullscreen mode

然后，前往bit.dev 创建一个免费账户。接着，创建一个集合来存放你的共享组件。在本教程中，你可以将新的共享集合命名为“angular-tutorial”。

完成后，将 bit-cli 验证到您的 bit.dev 帐户。

$ bit login
Enter fullscreen mode Exit fullscreen mode

共享一个 Angular 组件

好了，现在一切准备就绪，可以开始了。为了帮助你入门，这里有一个关于如何在两个应用程序之间共享 Angular 组件的实战教程。

克隆演示应用程序

本教程基于 Angular 8。要运行本教程，请克隆并设置 Angular 教程项目：https://github.com/teambit/bit-angular-tutorial

$ git clone https://github.com/teambit/bit-angular-tutorial
$ cd bit-angular-tutorial
$ npm install
Enter fullscreen mode Exit fullscreen mode

我们将分享Angular 教程项目中的**产品列表组件**，并将其应用到另一个应用程序中。完成后，该组件将发布在 bit.dev 上，供您的团队在自己的项目中发现、使用和开发。

跟踪产品列表组件

Bit 的命令与 Git 非常相似，使用起来也很方便。

让我们使用 `bit add` 命令来跟踪产品列表组件。我们需要告诉 Bit 该组件的位置以及与之相关的文件。由于所有文件都位于产品列表目录下，最简单的方法是将该目录中的所有文件添加到组件中。Bit 会自动命名组件。

对于 Angular 组件，我们还需要指定组件入口点，在大多数情况下，它将是包含 ngModule 的文件。在本例中，它是 product-list.module.ts 文件。

运行以下命令：

$ bit add src/app/product-list  --main src/app/product-list/product-list.module.ts

tracking component product-list:
added src/app/product-list/product-list.component.css
added src/app/product-list/product-list.component.html
added src/app/product-list/product-list.component.ts
added src/app/product-list/product-list.module.ts
added src/app/product-list/products.ts
Enter fullscreen mode Exit fullscreen mode

就这样。Bit 识别出了组件及其所有文件，定义了组件的所有依赖项，并开始跟踪它。

您可以使用位状态来确保组件所需的所有文件都已正确添加：

$ bit status
new components

     > product-list ... ok
Enter fullscreen mode Exit fullscreen mode

注意：本例中，products.ts 文件已添加到组件中。如果其他组件也使用它，请将其转换为一个独立组件，使其成为 product-list 和其他组件的依赖项。

安装 Angular 编译器

目前，我们已经向 Bit 提供了组件的源文件。但是，为了在其他项目中使用这些文件，需要先构建该组件。

Bit 提供了丰富的编译器选择（您也可以添加自己的编译器）。构建 Angular 组件需要Angular 编译器。compilers
/angular-envs · Bit
*请注意，此环境仍处于实验阶段，请谨慎使用。适用于 Bit 版本 >= 14.2.3。Bit…*bit.dev

在教程仓库中运行以下命令来安装编译器：

$ bit import bit.envs/compilers/angular --compiler

the following component environments were installed
- bit.envs/compilers/angular@0.1.2
Enter fullscreen mode Exit fullscreen mode

运行教程时，版本可能会略有不同。

Angular 编译器现已设置为 Bit 工作区的默认编译器。您可以检查 package.json 文件，并在 Bit 部分查找以下条目来验证编译器是否已安装：

"env": {
      "compiler": "bit.envs/compilers/angular@0.1.2"
    },
Enter fullscreen mode Exit fullscreen mode

要构建组件，请在项目中运行以下命令：

$ bit build
Enter fullscreen mode Exit fullscreen mode

这样会生成组件名称（产品列表）以及文件名列表。这些就是您组件的构建文件 👍

将组件导出到 bit.dev

组件构建完成后，现在可以将其分享给全世界了。组件版本遵循语义化版本控制（semver）标准。要为组件添加版本号，请运行以下命令：

$ bit tag --all 0.0.1
1 component(s) tagged

new components
     > product-list@0.0.1
Enter fullscreen mode Exit fullscreen mode

此命令会标记 Bit 工作区中当前已暂存的所有组件。在本例中，它只标记了产品列表组件。

您可以运行 bit status 命令来验证版本化的组件。

$ bit status
staged components

     > product-list. versions: 0.0.1 ... ok
Enter fullscreen mode Exit fullscreen mode

这里需要注意的是，该组件已被视为暂存状态。这意味着它现在可以导出了。接下来，您可以将该组件导出到您的 bit.dev 集合中：

$ bit export <username>.angular-tutorial
exported 1 components to collection <username>.angular-tutorial
Enter fullscreen mode Exit fullscreen mode

该组件现在已在 bit.dev 的组件库中显示。您可以通过https://bit.dev//angular-tutorial访问它。您也可以访问为本演示创建的组件：https ://bit.dev/bit/angular-tutorial

现在检查组件状态时，将不再在本地工作区中显示该组件，因为它现在托管在远程 bit.dev 集合中：

$ bit status
nothing to tag or export
Enter fullscreen mode Exit fullscreen mode

如果您想查看所有组件及其版本，可以运行：

$ bit list
Enter fullscreen mode Exit fullscreen mode

目前，组件代码仍在您的本地项目中（并且应该提交到您的源代码控制系统中），但其他项目也可以使用它。

在 bit.dev 中预览组件

Angular 组件也可在 bit.dev 云端获取。请访问https://bit.dev并登录您的帐户（如果您尚未登录）：

  1. 在左侧面板中选择收藏导航器，然后选择收藏集。

  2. 点击您的收藏，您将看到您的组件产品列表。

  3. 点击产品列表组件即可查看其实时演示。

组件演示区提供了一个基本的 Angular 应用（您可能认出这个示例应用就是 Angular CLI 提供的应用）。我们将修改这个应用以显示产品列表组件。

编辑组件示例

该组件会被自动识别为 Angular 组件。我们将修改 app.module.ts 文件以导入我们的产品列表模块。

修改这行：

import ProductList from '@bit/.angular-tutorial.product-list';
Enter fullscreen mode Exit fullscreen mode

进入这一行：

import {ProductListModule} from '@bit/.angular-tutorial.product-list';
Enter fullscreen mode Exit fullscreen mode

将模块添加到模块的导入部分：

imports: [
        BrowserModule,
        ProductListModule
    ],
Enter fullscreen mode Exit fullscreen mode

app.module.ts 文件应该如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ProductListModule } from '@bit/bit.angular-tutorial.product-list';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        ProductListModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

修改 app.component.html 文件，并将其内容替换为：

<app-product-list></app-product-list>
Enter fullscreen mode Exit fullscreen mode

保存示例。几秒钟后，您将在 Playground 中看到组件渲染结果。您可以在这里查看示例。

将该组件安装到另一个项目中

现在您将创建另一个 Angular 应用程序，并在该新应用程序中使用产品列表组件。

创建一个新的 Angular 应用程序

最快的方法是使用 Angular CLI 生成一个新的应用程序。切换到一个新的目录。

如果您已经全局安装了 Angular-cli，则只需运行：

$ ng new my-new-app
Enter fullscreen mode Exit fullscreen mode

如果您没有全局安装 angular-cli，并且不想安装它，可以使用npx临时安装它：

$ npx --package @angular/cli ng new my-new-app
Enter fullscreen mode Exit fullscreen mode

为了演示，您可以跳过路由设置，选择 CSS 进行样式设置。在终端中，切换到 my-new-app 目录。

使用 npm/yarn 安装组件

使用您喜欢的包管理器（npm 或 yarn）安装该组件。该组件存储在 bit.dev 注册表中，因此组件的完整路径为：@bit/..

使用 npm 运行安装命令：

$ npm install @bit/<username>.angular-tutorial.product-list --save
Enter fullscreen mode Exit fullscreen mode

该组件现已添加到您的 package.json 文件中：

"@bit/<username>.angular-tutorial.product-list": "0.0.1"
Enter fullscreen mode Exit fullscreen mode

在新应用程序中使用该组件

现在，您可以像导入其他组件一样在代码中使用该组件。将其作为模块添加到顶级应用模块，并在应用页面中使用它。我们将对代码进行与在 Playground 中相同的更改：

// app.module.ts
import { ProductListModule } from '@bit/<username>.angular-tutorial.product-list';
Enter fullscreen mode Exit fullscreen mode

在应用模块的导入部分添加 ProductListModule：

imports: [
        BrowserModule,
        ProductListModule
    ],
Enter fullscreen mode Exit fullscreen mode

现在只需将产品列表组件添加到应用程序的 HTML 文件中即可。您可以将所有现有内容替换为上面的代码行，或者将其添加到 HTML 页面中。

// src/app/app.component.html
<app-product-list></app-product-list>
Enter fullscreen mode Exit fullscreen mode

最后，但同样重要的是，使用 Angular CLI 运行您的应用程序：

$ npm run start
Enter fullscreen mode Exit fullscreen mode

太棒了！现在您可以在新建的应用程序中看到组件列表了。您刚刚成功地将一个组件从一个项目共享到另一个项目🎊

对多个组件执行相同的操作，并邀请您的团队进行协作……

修改使用项目中的组件

Bit 拥有一项独特的功能：它允许您从任何使用该组件的项目中开发和更新组件。这对于加快开发速度非常有用，因为它使您和您的团队成员能够协作并根据需要提出更新建议。

我们将对组件进行一些更改，然后将其导出回集合中。我们将向产品列表添加一个“查看”按钮。为简单起见，该按钮只会显示一个提示信息，表明该产品已被查看。

导入组件

目前，产品列表组件只是以构建后的形式安装到我们的项目中。现在，我们想将代码导入到我们的项目中并进行修改。

要导入该组件，请在新建的 my-new-app 项目中创建一个 Bit 工作区：

$ bit init
Enter fullscreen mode Exit fullscreen mode

然后运行以下命令（组件页面上也有该命令）：

$ bit import <username>.angular-tutorial/product-list

bit import bit.angular-tutorial/product-list
successfully imported one component
- added bit.angular-tutorial/product-list new versions: 0.0.1, currently used version 0.0.1
Enter fullscreen mode Exit fullscreen mode

收到缺少核心依赖项的通知是正常的。你的项目中应该已经包含了这些包。

你会收到一条消息，提示 @angular/core 和 @angular/common 是同级依赖项。这没关系，因为你的 my-new-app 项目中已经包含了它们。

事情经过是这样的：

  • 创建一个新的顶级组件文件夹，其中包含组件的代码、编译后的代码和 node*modules（在这种情况下，node*modules 为空，因为所有 node_modules 都是对等依赖项，并且取自根项目）。

  • .bitmap 文件已修改，以包含对组件的引用

  • package.json 文件已修改，指向文件本身而不是远程包。您的 package.json 文件现在显示：

    "@bit/.angular-tutorial.product-list": "file:./components/product-list"

启动您的应用程序以确保它仍然有效（确实如此，无需任何更改。Bit 会处理一切）。

更新代码

让我们修改产品列表组件。修改 components/product-list/product-list.component.ts 文件，添加以下方法：

view() {
    window.alert('The product has been viewed!');
 }
Enter fullscreen mode Exit fullscreen mode

修改 components/product-list/product-list.component.html 文件，在分享按钮之后添加以下部分：

<button (click)="view()">
        View
    </button>
Enter fullscreen mode Exit fullscreen mode

修改 CSS，为按钮添加边距：

margin: 4px;
Enter fullscreen mode Exit fullscreen mode

运行Angular应用程序：

$ npm run start
Enter fullscreen mode Exit fullscreen mode

该应用程序尚未更改。Bit 组件由 bit 编译器编译。请在另一个终端中运行 bit build 命令来编译更改。您应该可以看到编译器已安装：

successfully installed the bit.envs/compilers/angular@0.1.2 compiler
Enter fullscreen mode Exit fullscreen mode

随后所有文件编译成功。

您的 Angular 项目将会刷新，现在您可以通过查看按钮看到已更改的组件。

在实际项目中，建议将这些更改提交到您的 GitHub 存储库。

导出更改

接下来，将对组件所做的更改导出回 bit.dev。

$ bit status
Enter fullscreen mode Exit fullscreen mode

产品列表组件已修改：

modified components

     > product-list ... ok
Enter fullscreen mode Exit fullscreen mode

将组件标记为新版本并导出。默认情况下，这是一个语义化版本控制补丁版本：

$ bit tag product-list
1 component(s) tagged

changed components
(components that got a version bump)
     > <username>.angular-tutorial/product-list@0.0.2
Enter fullscreen mode Exit fullscreen mode

将其导出回收藏集：

$ bit export <username>.angular-tutorial
exported 1 components to scope <username>.angular-tutorial
Enter fullscreen mode Exit fullscreen mode

请前往 bit.dev 上的组件页面，您可以看到该组件已更新至新版本。这些更改在组件 Playground 中也可见。

更新原始项目中的更改

在最后一个阶段，您将把更改导入到原始项目中，然后切换回 Angular-tutorial。

导入更改

运行 bit import 命令查看是否有任何组件发生更改（类似于执行 git pull 命令来检查 git 更改）。

我们会看到产品列表组件已更改，并且存在一个新版本：

$ bit import
successfully imported one component
- updated <username>.angular-tutorial/product-list new versions: 0.0.2
Enter fullscreen mode Exit fullscreen mode

组件已下载但尚未更改。请检查工作区状态，您将看到以下内容：

$ bit status
pending updates

    > <username>.angular-tutorial/product-list current: 0.0.1 latest: 0.0.2
Enter fullscreen mode Exit fullscreen mode

查看

将组件的更改合并到您的项目中。命令结构为 bit checkout。因此，您需要运行：

$ bit checkout 0.0.2 product-list
successfully switched <username>.angular-tutorial/product-list to version 0.0.2
updated src/app/product-list/product-list.component.css
updated src/app/product-list/product-list.component.html
updated src/app/product-list/product-list.component.ts
updated src/app/product-list/product-list.module.ts
updated src/app/product-list/products.ts
Enter fullscreen mode Exit fullscreen mode

Bit 正在执行 git 合并操作，因此更新后的组件代码现在将合并到您的代码中。再次运行应用程序，以查看它是否能与更新后的组件正常工作：

$ npm run start
Enter fullscreen mode Exit fullscreen mode

就这样。更改已在两个项目之间移动并同步。您的应用程序现在正在使用更新后的组件运行……

关于 Angular 的一些指导原则……

Bit 团队与 Angular 团队合作，制定了一些共享可复用组件的最佳实践。您可以在此链接中找到这些最佳实践。如有任何疑问，请随时寻求帮助:)

结论

在 Angular 应用程序之间共享组件意味着您可以构建模块化应用程序，利用代码重用和组合，因此构建起来更容易、速度更快，维护起来也更简单。

Bit 让您的团队避免了在任何规模下发布组件的额外开销，为您的团队提供了一个通用的发现中心，并允许您修改和更新任何项目中的组件以进行协作。

Angular 组件的可重用性与 Bit 的优势完美契合，能够帮助您和您的团队成功共享代码。它既可以与组件库配合使用，也可以直接在您的应用程序之间使用，所以最终选择权在您手中……

分享快乐！🍺

文章来源：https://dev.to/giteden/how-to-share-angular-components- Between-projects-and-apps-10lk
2023年你应该学习的10种Dev...
Laravel Jetstream...