Metabase Embedding SDK 与 Angular 20 主机应用的集成边界测试以 react-mount 指令桥接 React 组件【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase导读e2e/embedding-sdk-host-apps/angular-20-host-app是 Metabase 仓库中一个专门用于边界情况edge case验证的实验性主机应用其核心目标是回答一个现实问题当宿主应用不是 React 而是 Angular 20 时如何将基于 React 的 Metabase Embedding SDKmetabase/embedding-sdk-react组件无缝嵌入并跑通端到端测试。本文基于该目录的完整源码与仓库中的 e2e 运行框架剖析Angular 组件内挂载 React 子树的桥接机制、认证配置、环境变量注入方式以及它在 CI 中的启动与测试流程帮助你掌握在任意非 React 前端框架中集成 Metabase Embedding SDK 的通用思路。一、项目定位为什么需要一个 Angular 主机应用Metabase Embedding SDK面向 React 的metabase/embedding-sdk-react提供的是MetabaseProvider、InteractiveDashboard、InteractiveQuestion等 React 组件要求使用者在组件树顶层提供 Provider 上下文。然而真实世界的宿主应用可能基于 Vue、Angular 或其他框架Angular 20 正是当前前端生态中一个典型的非 React目标环境。该目录 READMEe2e/embedding-sdk-host-apps/angular-20-host-app/README.md只有一句话点明其定位The edge case check in an experimental environment即它不是一个产品化示例而是一个实验环境下的边界情况检查载体用于持续验证 SDK 在 Angular 20 这一特定宿主框架中的可用性防止回归。理解这一点很重要——阅读本目录时关注点应放在桥接与集成上而不是当作通用最佳实践模板。该主机应用与其他宿主应用Vite 6、Next.js 15 App Router / Pages Router并列存放于 e2e/embedding-sdk-host-apps 下由统一的 e2e 运行器调度共同构成 SDK 的多框架兼容性验证矩阵。二、目录结构与技术栈总览e2e/embedding-sdk-host-apps/angular-20-host-app/ ├── angular.json # Angular CLI 构建/服务配置ngx-env/builder ├── entrypoint.sh # 应用启动脚本安装依赖、注入本地 SDK 包、启动 dev server ├── package.json # 依赖清单Angular 20 React 18 共存 ├── package-lock.json ├── tsconfig.json └── src/ ├── index.html ├── main.ts # bootstrapApplication 引导入口 └── app/ ├── app.component.tsx # 根组件仅含 router-outlet ├── app.config.ts # 应用级 providers Metabase 认证配置 ├── app.routes.ts # 两个页面路由 ├── interactive-dashboard-page.component.tsx ├── interactive-question-page.component.tsx └── react‐mount.directive.ts # React 桥接核心Angular 指令技术栈的混搭特征在 package.json 中一目了然Angular 侧angular/core、angular/router、angular/platform-browser等均为^20.0.0使用 Angular 20 的 standalone 组件体系React 侧react/react-dom为^18.3.1用于承载 Embedding SDK 组件构建工具开发依赖中的angular-devkit/build-angular与angular/cli同为^20.0.0而ngx-env/builder19.0.4负责将环境变量注入 Angular 应用下文详述类型types/react与types/react-dom保证 TSX 语法在 TypeScript 5.8 下正常编译覆写overrides.esbuild固定为0.28.1用于规避构建器之间的 esbuild 版本冲突。需要留意的是react‐mount.directive.ts这一文件名中的连字符并非普通 ASCII 连字符U002D而是 U2010HYPHEN仓库中即以此命名拷贝路径时需保持原样。三、React 桥接层ReactMountDirective 指令剖析Angular 无法直接渲染 React 元素二者各自维护自己的组件树与变更检测机制。本应用给出的答案是用 Angular 指令作为挂载点在指令生命周期内手动调用react-dom/client的createRoot来托管一棵 React 子树。完整实现见 src/app/react‐mount.directive.ts其核心逻辑分四步1. 定义指令并接收 React 工厂函数Directive({ selector: [reactMount], standalone: true }) export class ReactMountDirective implements AfterViewInit, OnChanges, OnDestroy { Input(reactMount) reactFactory!: () ReactElement;指令选择器为属性型[reactMount]输入值是一个返回ReactElement的工厂函数而非组件实例——这样每次渲染包括更新都能通过重新调用工厂拿到最新的元素树。2. 在视图初始化后创建 React 根并渲染ngAfterViewInit() { this.ngZone.runOutsideAngular(() { this.root createRoot(this.hostRef.nativeElement); this.root.render(this.reactFactory()); }); }这里有两个关键细节createRoot(hostRef.nativeElement)将 React 根挂到 Angular 指令所作用的宿主 DOM 元素上实现Angular 视图内嵌 React 子树ngZone.runOutsideAngular(...)让 React 的调度与事件处理脱离 Angular Zone避免 React 内部频繁的异步任务触发 Angular 的变更检测从而防止性能退化与无限循环——这是双框架共存时最重要的工程决策之一。3. 输入变化时重新渲染ngOnChanges(changes: SimpleChanges) { if (this.root reactFactory in changes) { this.ngZone.runOutsideAngular(() { this.root!.render(this.reactFactory()); }); } }当父级 Angular 组件更新reactFactory输入时指令在OnChanges中拿到新的工厂函数并重新render保证 React 子树与 Angular 侧状态保持同步。4. 销毁时卸载 React 根ngOnDestroy() { if (this.root) { this.ngZone.runOutsideAngular(() { this.root!.unmount(); }); } }组件销毁时调用root.unmount()清理 React 子树避免内存泄漏。三个生命周期钩子AfterViewInit/OnChanges/OnDestroy与 React 的createRoot/render/unmount一一对应构成完整的挂载生命周期。四、页面组件在 Angular 模板中渲染 SDK 组件桥接指令的使用方式体现在两个页面组件中它们分别验证 Embedding SDK 的两个核心交互组件。4.1 交互式看板页interactive-dashboard-page.component.tsx 使用InteractiveDashboardComponent({ standalone: true, selector: app-interactive-dashboard-page, imports: [ReactMountDirective, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: span [reactMount]reactElement/span , }) export class InteractiveDashboardPageComponent implements OnInit { defaultDashboardId 1; dashboardId this.defaultDashboardId; ngOnInit() { this.route.queryParamMap.subscribe((params) { const locale params.get(locale); const rawDashboardId params.get(dashboardId); this.locale locale; this.dashboardId rawDashboardId ! null ? Number(rawDashboardId) : this.dashboardId; }); } public reactElement (): ReactElement ( MetabaseProvider authConfig{metabaseProviderAuthConfig} locale{this.locale} InteractiveDashboard dashboardId{this.dashboardId} withDownloads / /MetabaseProvider ); }几个值得注意的要点模板中仅有一个span [reactMount]reactElementAngular 侧不做任何渲染工作全部交给 React 子树changeDetection: ChangeDetectionStrategy.OnPush配合runOutsideAngular将 Angular 的变更检测负担降到最低dashboardId与locale通过ActivatedRoute的 query params 读取如?dashboardId2localezh-CN默认看板 ID 为1支持在 e2e 中通过 URL 参数切换被测目标InteractiveDashboard dashboardId{...} withDownloads /中的withDownloads启用看板下载功能属于 SDK 组件的可选能力。4.2 交互式问题页interactive-question-page.component.tsx 结构完全对称只是换成InteractiveQuestion默认问题 ID 为24public reactElement (): ReactElement ( MetabaseProvider authConfig{metabaseProviderAuthConfig} locale{this.locale} InteractiveQuestion questionId{this.questionId} / /MetabaseProvider );与看板页的区别仅在于组件与参数questionId。二者共享同一个MetabaseProvider认证配置与同一个桥接指令证明该桥接模式可以复用于 SDK 的任意交互组件。五、认证配置与环境变量注入5.1 defineMetabaseAuthConfig 与 NG_APP_MB_PORTapp.config.ts 中通过 SDK 提供的defineMetabaseAuthConfig声明认证配置export const metabaseProviderAuthConfig defineMetabaseAuthConfig({ metabaseInstanceUrl: http://localhost:${process.env.NG_APP_MB_PORT}, });metabaseInstanceUrl指向运行中的 Metabase 实例地址端口号来自环境变量NG_APP_MB_PORT。该变量名带有NG_APP_前缀正是ngx-env/builder的约定Angular 构建器默认只会把带NG_APP_前缀的环境变量暴露给前端代码process.env.NG_APP_*未加前缀的变量不会进入客户端 bundle从而避免密钥泄露。5.2 环境变量在 e2e 框架中的注入仓库的 e2e 运行器在 e2e/runner/embedding-sdk/host-apps/constants/host-app-setup-configs.js 中为每个宿主应用定义了统一的启动环境const BASE_ENV { WATCH: process.env.HOST_APP_ENVIRONMENT development ? true : false, MB_PORT: BACKEND_PORT, CLIENT_PORT: 4400, }; angular-20-host-app-e2e: { ...BASE_SETUP_CONFIG, appName: angular-20-host-app, env: { ...BASE_ENV, NG_APP_MB_PORT: BASE_ENV.MB_PORT, // ← 传给 Angular 应用 }, },其中MB_PORT即BACKEND_PORT是 Metabase 后端的端口号被映射为 Angular 应用可读的NG_APP_MB_PORTCLIENT_PORT固定为4400是宿主应用 dev server 的监听端口同时也是 Cypress 访问应用的端口。配套的 Cypress 环境变量PORT同样取自CLIENT_PORT保证浏览器端与测试端端口一致。5.3 Zoneless 变更检测同一文件的 providers 声明中还使用了 Angular 20 的新能力export const appConfig: ApplicationConfig { providers: [provideZonelessChangeDetection(), provideRouter(routes)], };provideZonelessChangeDetection()使应用完全运行在无 Zone 模式下。这与桥接指令中的runOutsideAngular相呼应既然 React 子树天然不依赖 Angular Zone宿主应用索性整体关闭 Zone 机制从架构层面消除双框架变更检测互相干扰的隐患——这也是 Angular 20 时代官方推荐的方向。六、路由、引导与启动脚本6.1 路由与引导app.routes.ts 注册两条路由路径与页面组件一一对应export const routes: Routes [ { path: interactive-question, component: InteractiveQuestionPageComponent }, { path: interactive-dashboard, component: InteractiveDashboardPageComponent }, ];根组件 app.component.tsx 仅含一个router-outletmain.ts 使用bootstrapApplication引导 standalone 应用。整个应用保持最小化聚焦验证 SDK 能否在 Angular 中工作这一单一目标。6.2 构建器与启动脚本angular.json 中最特殊的是构建器替换build: { builder: ngx-env/builder:application, ... }, serve: { builder: ngx-env/builder:dev-server, ... }默认的angular-devkit/build-angular被替换为ngx-env/builder正是为了启用NG_APP_环境变量注入能力serve的host被设为0.0.0.0便于容器/CI 环境访问。开发配置关闭优化、开启 source map生产配置启用 output hashing。entrypoint.sh 是应用的实际启动入口由package.json的start脚本调用set -e rm -rf dist HOST_APP_DIR$(pwd) npm ci --install-links npm i ../../../resources/embedding-sdk --install-links --no-save if [ $WATCH true ]; then npm run watch -- --port $CLIENT_PORT else npm run preview -- --port $CLIENT_PORT fi其流程为清理 dist → 按 lockfile 精确安装依赖npm ci→ 从resources/embedding-sdk安装本地构建的 SDK 包--no-save不入 package.json→ 根据WATCH环境变量选择 watch 模式开发或 preview 模式生产构建并监听CLIENT_PORT。这意味着 e2e 验证的始终是当前仓库源码构建出的 SDK而非 npm 上的发布版本。七、e2e 调度如何进入 CI 测试矩阵Angular 主机应用并不是孤立的它被统一纳入仓库的 Embedding SDK e2e 体系在 e2e/runner/embedding-sdk/host-apps/types.ts 中注册套件名angular-20-host-app-e2e在 e2e/runner/run_cypress_ci.js 中作为可选的 CI 测试套件之一列出在 e2e/runner/resolve-sdk-e2e-config.js 中通过getHostAppE2eConfig(angular-20-host-app-e2e)解析出运行配置在 e2e/runner/run_cypress_host_sample_apps.ts 中angular-20-host-app-e2e与 Vite 6、Next.js 15 等套件并列命中后先执行startHostAppContainers(...)启动宿主应用容器再运行 Cypress。整个链路表明Angular 20 宿主应用与 React 生态宿主应用共享同一套起容器 → 起应用 → 跑 Cypress的测试编排这也是仓库对边界情况进行持续回归检查的方式。八、边界情况清单与集成要点总结结合源码可将本目录验证的边界情况归纳如下框架桥接React 18 的createRoot必须挂在 Angular 指令的宿主元素上且渲染/卸载均需在runOutsideAngular中执行避免 Zone 冲突生命周期对齐AfterViewInit → createRootrender、OnChanges → render、OnDestroy → unmount任何一步缺失都会造成渲染时序或内存问题Zone 策略provideZonelessChangeDetection()全局关闭 Zone与局部runOutsideAngular双管齐下是 Angular 20 下集成 React SDK 的关键配置环境变量隔离SDK 实例地址必须通过NG_APP_前缀的环境变量注入e2e 运行器负责把后端端口MB_PORT映射为NG_APP_MB_PORT组件复用性InteractiveDashboard与InteractiveQuestion两个页面共享同一桥接指令与同一认证配置验证了桥接方案的通用性SDK 来源测试始终使用resources/embedding-sdk下的本地构建产物保证验证的是当前源码状态。若要在自己的 Angular 应用中复刻此模式最小步骤是编写一个类似ReactMountDirective的 standalone 指令内部createRootrunOutsideAngular在 Angular 模板中挂一个span [reactMount]工厂函数并将MetabaseProvider包在 SDK 组件最外层。更完整的 SDK 概念说明可参考 docs/embedding/introduction.md 与 docs/embedding/sdk 目录下的文档体系。【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Metabase Embedding SDK 与 Angular 20 主机应用的集成边界测试：以 react-mount 指令桥接 React 组件
Metabase Embedding SDK 与 Angular 20 主机应用的集成边界测试以 react-mount 指令桥接 React 组件【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase导读e2e/embedding-sdk-host-apps/angular-20-host-app是 Metabase 仓库中一个专门用于边界情况edge case验证的实验性主机应用其核心目标是回答一个现实问题当宿主应用不是 React 而是 Angular 20 时如何将基于 React 的 Metabase Embedding SDKmetabase/embedding-sdk-react组件无缝嵌入并跑通端到端测试。本文基于该目录的完整源码与仓库中的 e2e 运行框架剖析Angular 组件内挂载 React 子树的桥接机制、认证配置、环境变量注入方式以及它在 CI 中的启动与测试流程帮助你掌握在任意非 React 前端框架中集成 Metabase Embedding SDK 的通用思路。一、项目定位为什么需要一个 Angular 主机应用Metabase Embedding SDK面向 React 的metabase/embedding-sdk-react提供的是MetabaseProvider、InteractiveDashboard、InteractiveQuestion等 React 组件要求使用者在组件树顶层提供 Provider 上下文。然而真实世界的宿主应用可能基于 Vue、Angular 或其他框架Angular 20 正是当前前端生态中一个典型的非 React目标环境。该目录 READMEe2e/embedding-sdk-host-apps/angular-20-host-app/README.md只有一句话点明其定位The edge case check in an experimental environment即它不是一个产品化示例而是一个实验环境下的边界情况检查载体用于持续验证 SDK 在 Angular 20 这一特定宿主框架中的可用性防止回归。理解这一点很重要——阅读本目录时关注点应放在桥接与集成上而不是当作通用最佳实践模板。该主机应用与其他宿主应用Vite 6、Next.js 15 App Router / Pages Router并列存放于 e2e/embedding-sdk-host-apps 下由统一的 e2e 运行器调度共同构成 SDK 的多框架兼容性验证矩阵。二、目录结构与技术栈总览e2e/embedding-sdk-host-apps/angular-20-host-app/ ├── angular.json # Angular CLI 构建/服务配置ngx-env/builder ├── entrypoint.sh # 应用启动脚本安装依赖、注入本地 SDK 包、启动 dev server ├── package.json # 依赖清单Angular 20 React 18 共存 ├── package-lock.json ├── tsconfig.json └── src/ ├── index.html ├── main.ts # bootstrapApplication 引导入口 └── app/ ├── app.component.tsx # 根组件仅含 router-outlet ├── app.config.ts # 应用级 providers Metabase 认证配置 ├── app.routes.ts # 两个页面路由 ├── interactive-dashboard-page.component.tsx ├── interactive-question-page.component.tsx └── react‐mount.directive.ts # React 桥接核心Angular 指令技术栈的混搭特征在 package.json 中一目了然Angular 侧angular/core、angular/router、angular/platform-browser等均为^20.0.0使用 Angular 20 的 standalone 组件体系React 侧react/react-dom为^18.3.1用于承载 Embedding SDK 组件构建工具开发依赖中的angular-devkit/build-angular与angular/cli同为^20.0.0而ngx-env/builder19.0.4负责将环境变量注入 Angular 应用下文详述类型types/react与types/react-dom保证 TSX 语法在 TypeScript 5.8 下正常编译覆写overrides.esbuild固定为0.28.1用于规避构建器之间的 esbuild 版本冲突。需要留意的是react‐mount.directive.ts这一文件名中的连字符并非普通 ASCII 连字符U002D而是 U2010HYPHEN仓库中即以此命名拷贝路径时需保持原样。三、React 桥接层ReactMountDirective 指令剖析Angular 无法直接渲染 React 元素二者各自维护自己的组件树与变更检测机制。本应用给出的答案是用 Angular 指令作为挂载点在指令生命周期内手动调用react-dom/client的createRoot来托管一棵 React 子树。完整实现见 src/app/react‐mount.directive.ts其核心逻辑分四步1. 定义指令并接收 React 工厂函数Directive({ selector: [reactMount], standalone: true }) export class ReactMountDirective implements AfterViewInit, OnChanges, OnDestroy { Input(reactMount) reactFactory!: () ReactElement;指令选择器为属性型[reactMount]输入值是一个返回ReactElement的工厂函数而非组件实例——这样每次渲染包括更新都能通过重新调用工厂拿到最新的元素树。2. 在视图初始化后创建 React 根并渲染ngAfterViewInit() { this.ngZone.runOutsideAngular(() { this.root createRoot(this.hostRef.nativeElement); this.root.render(this.reactFactory()); }); }这里有两个关键细节createRoot(hostRef.nativeElement)将 React 根挂到 Angular 指令所作用的宿主 DOM 元素上实现Angular 视图内嵌 React 子树ngZone.runOutsideAngular(...)让 React 的调度与事件处理脱离 Angular Zone避免 React 内部频繁的异步任务触发 Angular 的变更检测从而防止性能退化与无限循环——这是双框架共存时最重要的工程决策之一。3. 输入变化时重新渲染ngOnChanges(changes: SimpleChanges) { if (this.root reactFactory in changes) { this.ngZone.runOutsideAngular(() { this.root!.render(this.reactFactory()); }); } }当父级 Angular 组件更新reactFactory输入时指令在OnChanges中拿到新的工厂函数并重新render保证 React 子树与 Angular 侧状态保持同步。4. 销毁时卸载 React 根ngOnDestroy() { if (this.root) { this.ngZone.runOutsideAngular(() { this.root!.unmount(); }); } }组件销毁时调用root.unmount()清理 React 子树避免内存泄漏。三个生命周期钩子AfterViewInit/OnChanges/OnDestroy与 React 的createRoot/render/unmount一一对应构成完整的挂载生命周期。四、页面组件在 Angular 模板中渲染 SDK 组件桥接指令的使用方式体现在两个页面组件中它们分别验证 Embedding SDK 的两个核心交互组件。4.1 交互式看板页interactive-dashboard-page.component.tsx 使用InteractiveDashboardComponent({ standalone: true, selector: app-interactive-dashboard-page, imports: [ReactMountDirective, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: span [reactMount]reactElement/span , }) export class InteractiveDashboardPageComponent implements OnInit { defaultDashboardId 1; dashboardId this.defaultDashboardId; ngOnInit() { this.route.queryParamMap.subscribe((params) { const locale params.get(locale); const rawDashboardId params.get(dashboardId); this.locale locale; this.dashboardId rawDashboardId ! null ? Number(rawDashboardId) : this.dashboardId; }); } public reactElement (): ReactElement ( MetabaseProvider authConfig{metabaseProviderAuthConfig} locale{this.locale} InteractiveDashboard dashboardId{this.dashboardId} withDownloads / /MetabaseProvider ); }几个值得注意的要点模板中仅有一个span [reactMount]reactElementAngular 侧不做任何渲染工作全部交给 React 子树changeDetection: ChangeDetectionStrategy.OnPush配合runOutsideAngular将 Angular 的变更检测负担降到最低dashboardId与locale通过ActivatedRoute的 query params 读取如?dashboardId2localezh-CN默认看板 ID 为1支持在 e2e 中通过 URL 参数切换被测目标InteractiveDashboard dashboardId{...} withDownloads /中的withDownloads启用看板下载功能属于 SDK 组件的可选能力。4.2 交互式问题页interactive-question-page.component.tsx 结构完全对称只是换成InteractiveQuestion默认问题 ID 为24public reactElement (): ReactElement ( MetabaseProvider authConfig{metabaseProviderAuthConfig} locale{this.locale} InteractiveQuestion questionId{this.questionId} / /MetabaseProvider );与看板页的区别仅在于组件与参数questionId。二者共享同一个MetabaseProvider认证配置与同一个桥接指令证明该桥接模式可以复用于 SDK 的任意交互组件。五、认证配置与环境变量注入5.1 defineMetabaseAuthConfig 与 NG_APP_MB_PORTapp.config.ts 中通过 SDK 提供的defineMetabaseAuthConfig声明认证配置export const metabaseProviderAuthConfig defineMetabaseAuthConfig({ metabaseInstanceUrl: http://localhost:${process.env.NG_APP_MB_PORT}, });metabaseInstanceUrl指向运行中的 Metabase 实例地址端口号来自环境变量NG_APP_MB_PORT。该变量名带有NG_APP_前缀正是ngx-env/builder的约定Angular 构建器默认只会把带NG_APP_前缀的环境变量暴露给前端代码process.env.NG_APP_*未加前缀的变量不会进入客户端 bundle从而避免密钥泄露。5.2 环境变量在 e2e 框架中的注入仓库的 e2e 运行器在 e2e/runner/embedding-sdk/host-apps/constants/host-app-setup-configs.js 中为每个宿主应用定义了统一的启动环境const BASE_ENV { WATCH: process.env.HOST_APP_ENVIRONMENT development ? true : false, MB_PORT: BACKEND_PORT, CLIENT_PORT: 4400, }; angular-20-host-app-e2e: { ...BASE_SETUP_CONFIG, appName: angular-20-host-app, env: { ...BASE_ENV, NG_APP_MB_PORT: BASE_ENV.MB_PORT, // ← 传给 Angular 应用 }, },其中MB_PORT即BACKEND_PORT是 Metabase 后端的端口号被映射为 Angular 应用可读的NG_APP_MB_PORTCLIENT_PORT固定为4400是宿主应用 dev server 的监听端口同时也是 Cypress 访问应用的端口。配套的 Cypress 环境变量PORT同样取自CLIENT_PORT保证浏览器端与测试端端口一致。5.3 Zoneless 变更检测同一文件的 providers 声明中还使用了 Angular 20 的新能力export const appConfig: ApplicationConfig { providers: [provideZonelessChangeDetection(), provideRouter(routes)], };provideZonelessChangeDetection()使应用完全运行在无 Zone 模式下。这与桥接指令中的runOutsideAngular相呼应既然 React 子树天然不依赖 Angular Zone宿主应用索性整体关闭 Zone 机制从架构层面消除双框架变更检测互相干扰的隐患——这也是 Angular 20 时代官方推荐的方向。六、路由、引导与启动脚本6.1 路由与引导app.routes.ts 注册两条路由路径与页面组件一一对应export const routes: Routes [ { path: interactive-question, component: InteractiveQuestionPageComponent }, { path: interactive-dashboard, component: InteractiveDashboardPageComponent }, ];根组件 app.component.tsx 仅含一个router-outletmain.ts 使用bootstrapApplication引导 standalone 应用。整个应用保持最小化聚焦验证 SDK 能否在 Angular 中工作这一单一目标。6.2 构建器与启动脚本angular.json 中最特殊的是构建器替换build: { builder: ngx-env/builder:application, ... }, serve: { builder: ngx-env/builder:dev-server, ... }默认的angular-devkit/build-angular被替换为ngx-env/builder正是为了启用NG_APP_环境变量注入能力serve的host被设为0.0.0.0便于容器/CI 环境访问。开发配置关闭优化、开启 source map生产配置启用 output hashing。entrypoint.sh 是应用的实际启动入口由package.json的start脚本调用set -e rm -rf dist HOST_APP_DIR$(pwd) npm ci --install-links npm i ../../../resources/embedding-sdk --install-links --no-save if [ $WATCH true ]; then npm run watch -- --port $CLIENT_PORT else npm run preview -- --port $CLIENT_PORT fi其流程为清理 dist → 按 lockfile 精确安装依赖npm ci→ 从resources/embedding-sdk安装本地构建的 SDK 包--no-save不入 package.json→ 根据WATCH环境变量选择 watch 模式开发或 preview 模式生产构建并监听CLIENT_PORT。这意味着 e2e 验证的始终是当前仓库源码构建出的 SDK而非 npm 上的发布版本。七、e2e 调度如何进入 CI 测试矩阵Angular 主机应用并不是孤立的它被统一纳入仓库的 Embedding SDK e2e 体系在 e2e/runner/embedding-sdk/host-apps/types.ts 中注册套件名angular-20-host-app-e2e在 e2e/runner/run_cypress_ci.js 中作为可选的 CI 测试套件之一列出在 e2e/runner/resolve-sdk-e2e-config.js 中通过getHostAppE2eConfig(angular-20-host-app-e2e)解析出运行配置在 e2e/runner/run_cypress_host_sample_apps.ts 中angular-20-host-app-e2e与 Vite 6、Next.js 15 等套件并列命中后先执行startHostAppContainers(...)启动宿主应用容器再运行 Cypress。整个链路表明Angular 20 宿主应用与 React 生态宿主应用共享同一套起容器 → 起应用 → 跑 Cypress的测试编排这也是仓库对边界情况进行持续回归检查的方式。八、边界情况清单与集成要点总结结合源码可将本目录验证的边界情况归纳如下框架桥接React 18 的createRoot必须挂在 Angular 指令的宿主元素上且渲染/卸载均需在runOutsideAngular中执行避免 Zone 冲突生命周期对齐AfterViewInit → createRootrender、OnChanges → render、OnDestroy → unmount任何一步缺失都会造成渲染时序或内存问题Zone 策略provideZonelessChangeDetection()全局关闭 Zone与局部runOutsideAngular双管齐下是 Angular 20 下集成 React SDK 的关键配置环境变量隔离SDK 实例地址必须通过NG_APP_前缀的环境变量注入e2e 运行器负责把后端端口MB_PORT映射为NG_APP_MB_PORT组件复用性InteractiveDashboard与InteractiveQuestion两个页面共享同一桥接指令与同一认证配置验证了桥接方案的通用性SDK 来源测试始终使用resources/embedding-sdk下的本地构建产物保证验证的是当前源码状态。若要在自己的 Angular 应用中复刻此模式最小步骤是编写一个类似ReactMountDirective的 standalone 指令内部createRootrunOutsideAngular在 Angular 模板中挂一个span [reactMount]工厂函数并将MetabaseProvider包在 SDK 组件最外层。更完整的 SDK 概念说明可参考 docs/embedding/introduction.md 与 docs/embedding/sdk 目录下的文档体系。【免费下载链接】metabaseThe easy-to-use open source Business Intelligence and Embedded Analytics tool that lets everyone work with data :bar_chart:项目地址: https://gitcode.com/GitHub_Trending/me/metabase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
