角质布依

让你的编码代理安装Buoy. 复制 角安装提示。 。 。 . 它的指南是 安装-angula.md。 。 。 . 看着拖车 角页面。 。 。 .

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

安装并签名

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

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 运行离开您的文件.

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

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,它改变两个构建者名称:

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

保持每个目标的其他场并构建配置. ng add 当它改变时 保留那些田地. 上面加了这个电话 app.config.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建筑中,设置此建筑选项:

{
  "buoy": { "release": true }
}

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

NgRx 存储

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

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 将打印此警告 :

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

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

导航系统

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

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. 离子角电话请参看 电容指南。 。 。 . 桌面链接和电话接线钩仍然需要自己的设置.

应用程序

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

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 地图或加载器自动关闭. 它将手动路径保存在下面,有你自己的链接.

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

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数字 :

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

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

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

// 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,使用:

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

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

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

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

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