# @buoy-gg/angular 中文文档

规范地址：https://npmcn.com/package/%40buoy-gg/angular/

版本：7\.0\.87
npm 元数据更新时间：2026-11-07T01:56:44.045Z
中文译文更新时间：2026-11-08T20:19:19.095Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40buoy-gg/angular
原文对照：https://npmcn.com/package/%40buoy-gg/angular/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：93 kB，38 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：@angular/core \>=19 \<23，@angular/common \>=19 \<23
- 首次发布：2026-10-09T13:26:51.344Z
- 最新版本发布：2026-11-07T01:56:43.834Z
- 近 30 天下载量：3593（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：25（近 12 个月 25 个）

## 中文简介

在Angular应用程序中运行Buoy.

## 安装

```sh
npm install @buoy-gg/angular
```

也可以使用：`pnpm add @buoy-gg/angular`、`yarn add @buoy-gg/angular`、`bun add @buoy-gg/angular`

## README

# 角质布依

让你的编码代理安装Buoy. 复制 [角安装提示](https://buoy.gg/buoy/latest/docs/web/angular#start-here)。 。 。 . 它的指南是 [安装-angula.md](https://buoy.gg/install-angular.md)。 。 。 . 看着拖车 [角页面](https://buoy.gg/buoy/latest/docs/web/angular)。 。 。 .

Buoy在Angular作为β运行. 开始于第一景后,在Angular的区外. 它与应用程序停止并跳过服务器. 你的应用程序保持它的角视图和状态. Buoy为自己的UI使用React.

## 安装并签名

从您的应用程序文件夹中运行这些 :

```sh
ng add @buoy-gg/angular
npx --package=@buoy-gg/core buoy login
ng serve
```

快速选择您想要的工具 . 网络、 控制台、 存储、 事件和 Env 开始检查 . 快速检查工具也符合应用程序:

-   如果应用程序有Angular路由器,则使用路线.
-   问若有角相.
-   如果它有NgRx或NGXS,则Redux.
-   在Angular 20或更新的上亮相.

React, React DOM, 和RN Web 和 Buoy 一起来. 对所有Buoy包使用相同的版本. 为了日后添加一个工具,安装它的Buoy包. 重新开始 `ng serve` 以装入新列表. 当列表更改时, 服务器会打印一个重启注释 . 一秒钟 `ng add` 运行离开您的文件.

对于多个应用程序,请按名称选择:

```sh
ng add @buoy-gg/angular --project my-app
npx --package=@buoy-gg/core buoy login --project my-app
```

登录写入 `src/environments/buoy.ts` 在应用程序的源根下. 建筑师读到它 `BUOY_KEY` 给你的. 登录也为本地的Buoy工具写出一个env文件. 它增加了两个文件 `.gitignore`别让他们犯错. Dev 令牌和自由密钥在密钥文件中保留了 dev guard. 每个人用自己的账户签名.

## 纳克加写什么

单位 `angular.json`,它改变两个构建者名称:

```json
{
  "build": {
    "builder": "@buoy-gg/angular:application"
  },
  "serve": {
    "builder": "@buoy-gg/angular:dev-server"
  }
}
```

保持每个目标的其他场并构建配置. `ng add` 当它改变时 保留那些田地. 上面加了这个电话 `app.config.ts`数字 :

```ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideBuoy } from '@buoy-gg/angular';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // Keep the app's other providers here.
    provideBuoy(),
  ],
};
```

对于NgModule apps,它把电话最后一次输入 `@NgModule.providers`。 。 。 . 建设者在应用开始前会加入轻钩. 让网络看到第一个应用程序初始化的电话. 它装入所有已安装的工具 。 你不必这样 `buoy.ts` 列表中选择一个选项. 你不需要布伊警卫或护身符.

Prod将Buoy换成一个小而空的供应商. 主机,工具,React DOM,和RN Web不对外开放. NgRx DevTools需要自己的德夫卫士,如下所示. SSR和先发制人让Buoy远离服务器代码. 守望楼使用同样的规则.

## QA 构建

为了将Buoy保留在QA建筑中,设置此建筑选项:

```json
{
  "buoy": { "release": true }
}
```

把它放在QA配置下方 `build.configurations`。 。 。 . 它保留了浏览器工具并打开了早期的钩子. 服务器捆绑仍然使用空提供者. 为了放行,你的团队与Buoy签约. 添加您的站点 [浮标.gg/板/站点](https://buoy.gg/dashboard/sites)。 。 。 . 那就通过 `provideBuoy({ signIn: true })`。 。 。 . 一个付了钱的钥匙也是作为备用的. 你的应用程序的接入规则和计划仍然适用. Dev 令牌和免入登录的密钥不要使用prod代码. NgRx,NGXS,和高亮仍然需要Angular dev模式.

## NgRx 存储

保持正常的存储和效果设置. 添加 `@ngrx/store-devtools` 并选择 Redux 工具. 将NgRx DevTools保存在德克萨斯卫士中. 打开 `provideBuoy()` 提供者列表中最后一个 :

```ts
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { provideBuoy } from '@buoy-gg/angular';

declare const ngDevMode: boolean | undefined;

// At the end of the app's providers:
(typeof ngDevMode === 'undefined' || ngDevMode)
  ? provideStoreDevtools({ maxAge: 50 })
  : [],
provideBuoy(),
```

与建造者不需要额外的NgRx桥接通. Buoy 提供 `REDUX_DEVTOOLS_EXTENSION` 通过 DI. 它从来没有声称 `window.__REDUX_DEVTOOLS_EXTENSION__`。 。 。 . 如果另一个提供者获胜, Dev 将打印此警告 :

```text
[Buoy] NgRx has no Buoy link. Move provideBuoy() last in providers.
```

该工具显示动作、状态和 diffs . 重放增加了一行新内容. 跳跃恢复选定的状态. 州跳可能要花一秒钟. 后卫保持了NgRx DevTools出道. `logOnly` 单枪匹马仍然在运送密码. 老套装可以留着 `provideBuoyNgRx()` 之后 `provideStoreDevtools()`。 。 。 .

## 导航系统

选择 Redux 工具并保留应用程序的 NGXS 存储. NGXS仍然需要自己的适配器呼叫:

```ts
import { provideBuoy } from '@buoy-gg/angular';
import { provideBuoyNgxs } from '@buoy-gg/angular/ngxs';

declare const ngDevMode: boolean | undefined;

// At the end of the app's providers:
(typeof ngDevMode === 'undefined' || ngDevMode)
  ? provideBuoyNgxs()
  : [],
provideBuoy(),
```

这个用 `NGXS_PLUGINS` 通过 DI. 它不需要浏览器全局或 `@ngxs/devtools-plugin`。 。 。 . 我们用RxJS 7.8测试了NGXS 22. 用一个适配器. 不混合 NGRx 和 NGXS 桥 . 跳跃呼叫 `Store.reset`重播电话 `Store.dispatch`。 。 。 . 同步动作在结束时显示. 错误仍然到达 NGXS . 已取消但无结果的动作不添加行 .

## 路由器、查询和高亮

与建造者, `provideBuoy()` 通过 DI 链接这些工具. 路由读取了应用程序的路由器和路由列表. 去问吧 `id` 在一个路径像 `/pokemon/:id`。 。 。 . 懒童路线显示,一旦应用加载它们.

腾讯使用app的Angular查询客户端. 保持原样 `provideTanStackQuery(queryClient)` 电话. 当你选择查询时, `ng add` 添加 `@tanstack/react-query`。 。 。 . Buoy的UI需要旁边的对等点 `@buoy-gg/react-query`。 。 。 . 匹配其版本为 `@tanstack/angular-query-experimental`。 。 。 . 两者必须解决同样的问题 `@tanstack/query-core` 版本和复制. 检查 `pnpm why @tanstack/query-core` 或者说 `npm ls @tanstack/query-core`。 。 。 . 拆分副本可以分解类型或离线开关. 密钥,数据,和回放都使用应用程序的客户端.

突出显示为每个视图绘制框并计数检查 . 它需要Angular 20或更新的和dev钩. 缺失的钩子显示"在这个应用程序里没有" Buoy将其他钩子留在原地并停止自取. 计数是视图检查,而不是油漆或 DOM 写作. 名单最多可容纳200人. 它没有给出React的原因或计时数据. 钩为私人API. 检查一下Angular升级.

## 角19和自定义构建者

Buoy建筑商与CLI 19、20、21和22合作. 新鲜的应用程序运行覆盖19,20和22. CLI 21是从它的种类和计划中检查出来的. 突出点不要出现在19号角上.

CLI 19 没有 `conditions` 选项. Buoy建筑商在那个CLI上 做了自己的活页交换. 新的 CLI 19 应用程序可能使用 `@angular-devkit/build-angular`。 。 。 . `ng add` 保持建设者并写手动设置.

同样的规则也适用于自定义构建者和Nx目标. `ng add` 读取目标 `angular.json`。 。 。 . 只有交换 `@angular/build` 建设者名. 对于其他建筑商来说,它印出它保存它们的原因. 它写出钩子,工具列表,dev guard,以及prod config. CLI 20+ 获得 `buoy-disabled` 条件. 检查您的自定义构建器是否接受 `conditions`。 。 。 . 如果没有,则使用条目文件互换. CLI 19 和 Webpack 获得条目文件互换代替. 工具列表也获得 prod 文件互换 . 保持路由器,查询和状态工具的手动应用链接. Nx 无的布局 `angular.json`,使用手动设置.

## 其他商店和电话应用程序

香草Zustand商店需要命名的商店物品. 过 `zustandStores: { ui: uiStore }` 在应用程序选项中. 安装 Zustand 工具 。 造者寻之. 它显示状态,变化,diff,和编辑.

信号Store还没有Buoy DI的特性. 不使用 NgRx 桥来信号 Store . 正在计划一个信号视图。 它没有运出. 它将显示当前页面使用的信号. 它不能列出应用程序中的每个信号. 乔泰需要与乔泰州合作的应用.

Angular 22 默认用于取取 HttpClient . 使用 `provideHttpClient(withXhr())` 如果应用程序需要XHR. 离子角电话请参看 [电容指南](https://buoy.gg/buoy/latest/docs/capacitor)。 。 。 . 桌面链接和电话接线钩仍然需要自己的设置.

## 应用程序

选项添加到构建器找到的设置中 . 保持Buoy呼叫在提供者列表中的最后一位. 传递一个物体,或者一个呼叫的工厂 `inject()`数字 :

```ts
provideBuoy({ zustandStores: { ui: uiStore } }),

// Or use a factory for app services:
provideBuoy(() => ({ queryClient: inject(QueryClient) })),
```

选择一个电话。 不同时使用. 该厂一度在应用的DI上下文中运行. 可以读商店 `inject(Store)` 我也一样. 路由器,查询器,高亮和NgRx仍然获得他们的链接. 构建器仍然装入每个已安装的工具 . 自定义 `apps` 和一个测试经纪人在这里工作.

合并规则是:

-   App 键替换自动键 。  `queryClient` 赢了.
-   `load()` 在应用程序选项后, 最后添加其密钥 .
-   列表和嵌入对象替换整个值. 这包括: `apps`, (中文(简体) ), `zustandStores`,以及 `externalSync`。 。 。 .
-   `links` 以工具 ID 合并 。 你的连结赢得了ID. 每个链接在渲染后运行并返回一个停止函数 . Buoy每停一停,再加上你 `onDestroy`。 。 。 .
-   明确 `modules` 地图或加载器自动关闭. 它将手动路径保存在下面,有你自己的链接.

要使用您自己的路由链接, 请在选项中通过 :

```ts
links: {
  'route-events': async () => {
    const { connectBuoyRouter } = await import('@buoy-gg/angular/router');
    return zone.runOutsideAngular(() =>
      connectBuoyRouter(router, fn => zone.run(fn)),
    );
  },
},
```

获取 `router` 财务报告和审定财务报表 `zone` 与 `inject()` 在工厂. 这只取代了路由链接 高亮继续. 使用 `highlight-updates` 以取代链接. 对于懒惰的应用程序设置,请 `load()` 返回挂载选项. 别管了 `modules` 以保留构建者的工具列表. 装载机和链接回调器运行于区外. 他们晚点跑,打个电话 `inject()` 在工厂.

## 手动设置

通过自己的工具列表时使用此路径 . 现有 `provideBuoy({ modules, ... })` 电话还正常. 一个工厂, `provideBuoy(() => options)`,可以调用 `inject()`。 。 。 . `load` 可以同时返回所有挂载设置. `onDestroy` 停止应用钩; `onMount` 获得停止功能. 明确 `modules` 地图或加载器选择此路径. 与构建器,其他选项保持了自动链接.

先把灯钩放进去 `src/main.ts`数字 :

```ts
import '@buoy-gg/angular/register';
```

不要使用反应检查钩 `@buoy-gg/core/web/register`。 。 。 . 制作一个工具列表,然后通过它后面的 dev guard:

```ts
// src/buoy.ts
import { BUOY_KEY } from './environments/buoy';
export const buoyOptions = {
  licenseKey: BUOY_KEY,
  modules: async () => ({
    network: await import('@buoy-gg/network/web'),
  }),
};
```

```ts
// src/app/app.config.ts
import { provideBuoy } from '@buoy-gg/angular';
import { buoyOptions } from '../buoy';

declare const ngDevMode: boolean | undefined;

// Last in the app's providers:
(typeof ngDevMode === 'undefined' || ngDevMode)
  ? provideBuoy(buoyOptions)
  : [],
```

对于CLI 20+ 接受的建造者 `conditions`,使用:

```json
{
  "conditions": ["buoy-disabled", "module", "production"],
  "fileReplacements": [
    { "replace": "src/buoy.ts", "with": "src/buoy.prod.ts" }
  ]
}
```

```ts
// src/buoy.prod.ts
export const buoyOptions = {};
```

保持警卫和档案交换. 运行时间 `isDevMode()` 仅检查工具块. 对于CLI 19或网络包装,让 `ng add` 写入条目交换. 或使用无 Buoy 导入的 prod 条目和配置文件 . 把应用程序的供应商保存在这些 prod 文件中.

在手动加载器中,根据需要使用这些应用链接:

| 工具 | 手动链接 |
| --- | --- |
| 路线 | 打电话 `connectBuoyRouter(router, fn => zone.run(fn))` 从 `@buoy-gg/angular/router`停下来 `onDestroy`。 。 。 . |
| 突出显示 | 打电话 `connectBuoyHighlights(module.HighlightUpdatesController, fn => zone.runOutsideAngular(fn))` 从 `@buoy-gg/angular/highlights`停下来 `onDestroy`。 。 。 . |
| NgRx 函数 | 打开 `provideBuoyNgRx()` 在NgRx DevTools之后, 在同一德夫卫士内部. |
| 查询 | 通过应用程序 `queryClient` 编辑 `'react-query'` 模块. |
| 苏斯坦德 | 过 `zustandStores` 编辑 `zustand` 模块. |

手动QA建设也需要 `enableInRelease: true`。 。 。 . 保持他们的应用守护真实,并省略了prod互换. 开始 `registerBrowserNetwork({ enableInRelease: true })` 从轻取钩入. 桌面链接需要 `externalSync: { enableInRelease: true }` 我也一样. 在返回的设置中保留此旗帜 `load`。 。 。 . 远程电话检查在打开工具前可能需要这些电话: `bootLifecycle()`, (中文(简体) ), `installLocationAdapters()`, (中文(简体) ), `installPermissions()`,以及 `installCapacitorNotificationCapture({ enableInRelease: true })`。 。 。 . 只使用该应用中安装的模块 .

## 常见问题

### @buoy-gg/angular 是什么？

在Angular应用程序中运行Buoy\.

### 如何安装 @buoy-gg/angular？

在项目目录运行 npm install @buoy-gg/angular，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（\>=19 \<23）、@angular/common（\>=19 \<23）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @buoy-gg/angular 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @buoy-gg/angular 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @buoy-gg/angular 可以商用吗？

@buoy-gg/angular 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @buoy-gg/angular 的下载量有多少？

根据 npm 官方下载统计，@buoy-gg/angular 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,593 次，日均约 120 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @buoy-gg/angular 还在维护吗？

最新版本 7\.0\.87 发布于 2026/11/07（1 天前）；至今共发布 25 个版本，其中过去 12 个月发布了 25 个；首次发布于 2026/10/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。