ThingsBoard UI 开发实践3 条命令跑通前端、一张表看懂目录、改一个组件的完整演示【免费下载链接】thingsboardOpen-source IoT Platform - Device management, data collection, processing and visualization.项目地址: https://gitcode.com/GitHub_Trending/th/thingsboardThingsBoard 是开源 IoT 平台负责设备管理、数据采集、处理与可视化它的网页界面用 Angular 编写代码集中在ui-ngx/目录。这篇只讲前端用 3 条命令起本地服务、用一张目录速览表分清代码位置、跟着改一个真实组件并列出登录失败内存不足这类最常踩的坑不需要你懂后端部署。快速跑通3 条命令启动 ThingsBoard 前端 ⚡这一节解决我现在就想看到界面的问题。ThingsBoard 的前端是一个标准 Angular 应用装依赖后起开发服务即可端口默认 4200。git clone https://gitcode.com/GitHub_Trending/th/thingsboard cd thingsboard/ui-ngx yarn install yarn startyarn start会自动打开浏览器。输出约一分钟后看到 ThingsBoard 登录页只要 8080 端口有 Java 后端在跑就能用管理员账号登录打开仪表盘。登录页能加载、但点登录报错通常是后端没起原因见后文坑点。目录结构速览5 个关键目录各管什么 这一节解决代码那么多我该从哪看起的问题。不用通读整个仓库先认准下面这张表够你定位绝大多数改动。目录作用ui-ngx/src/app/core/核心服务HTTP 接口、鉴权、路由守卫按实体类型一个文件ui-ngx/src/app/shared/可复用组件与指令弹窗、自动补全、时间选择 TS 模型定义ui-ngx/src/app/modules/业务页面模块主功能在modules/home/登录在modules/login/ui-ngx/src/assets/静态资源图标、帮助文档help/en_US/、地图样式ui-ngx/src/scss/ 与 theme.scss全局样式入口与主题变量看页面源码有个捷径ui-ngx/structure.md 把每个 URL 映射到了具体源码目录例如/tenants对应home/pages/tenant/照着 URL 就能跳文件。动手新建一个共享组件并复用到页面 这一节解决我想加自己的组件的问题。ThingsBoard 的组件统一用tb前缀在 angular.json 里定义并通过shared/*路径别名跨模块引用下面用一个最小例子走通流程。输入你希望做一个可复用的设备状态标签放在任意仪表盘里显示。ng generate component app/shared/components/label-badge生成物label-badge.component.ts/.html/.scss三件套加一个 module。你在 TS 里自己声明输入如Input() value: string然后在别的模块里这样用tb-label-badge [value]status/tb-label-badge输出这个标签出现在任何引入过它的模板里。跨模块复用的关键是导入对应 module写导入路径时用shared/components/...别名而不是相对路径../../否则 TypeScript 解析不到。想验证改动重新yarn start热更新即可不必重启。最常踩的 3 个坑登录失败、内存不足、补丁冲突 ⚠️这一节解决明明按步骤跑了却跑不通的问题。这三条都是真实高频问题先知道怎么避能省半天。1. 前端能开、登录失败。前端只负责渲染所有/api、/api/ws请求被代理转发到localhost:8080见 proxy.conf.js。8080 上没有后端登录页能显示但提交必报错。规避先确认 Java 后端已启动、监听 8080再开前端。2. 构建内存不足、直接崩溃。start脚本给 Node 预留了 8GB--max_old_space_size8048。内存小的机器会 OOM。规避临时把该值调低或改用yarn build出生产包内存占用更可控。3. 补丁没打上、安装报错。prepare脚本会执行patch-package --error-on-fail把 ui-ngx/patches/ 里的依赖补丁打到node_modules。不要手改node_modules改依赖行为请把补丁放进patches/安装报 fail 时重新yarn install通常能恢复。延伸学习继续深入的 4 个地方 这一节解决接下来往哪看的问题。以下都是仓库内的相对路径点开即可对照代码读。ui-ngx/structure.md前端导航与测试指南URL 到源码的完整映射表定位页面最快。ui-ngx/src/app/shared/components/共享组件目录写新组件前先看现成实现抄结构最稳。ui-ngx/src/assets/help/en_US/产品帮助文档Markdown理解各功能语义。TEST_FAST.md测试并行与内存参数说明需要跑测试或调内存时参考。规则节点的界面配置长这样理解它有助于读懂modules/home/里规则链相关组件【免费下载链接】thingsboardOpen-source IoT Platform - Device management, data collection, processing and visualization.项目地址: https://gitcode.com/GitHub_Trending/th/thingsboard创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考