用途:在 Angular 项目中完成 Taiga UI 的安装与接线,确保组件、样式和根容器可用。适用于需要 Taiga UI 组件但项目尚无 @taiga-ui 包,或 tui-root、Taiga 样式及 providers 缺失的场景。
主要流程:
- 检查是否已安装:grep '@taiga-ui/' package.json。已存在包则跳到第 3 步。
- 安装:npx ng add taiga-ui --defaults --skip-confirmation。这是唯一受支持的安装路径,不要手动向 package.json 添加 @taiga-ui/* 包。该 schematic 会询问添加哪些包(core、kit、icons、layout、addons),按任务需要选择,通常 core + kit;它也会自动接好样式、providers 与 imports。
- 校验接线(通常 schematic 已完成,仅补齐缺失项): 样式——angular.json 的 architect.build.options.styles 需包含 @taiga-ui/core/styles/taiga-ui-theme.less 与 @taiga-ui/core/styles/taiga-ui-fonts.less。 Providers——应用 providers 中需有 provideTaiga(),默认 CLI 结构中 providers 数组位于 app.config.ts。 根包裹——根模板(app.html)需用 <tui-root>...</tui-root> 包裹全部内容,根组件从 @taiga-ui/core 导入 TuiRoot。缺少它,portals、dialogs、hints 与 alerts 将无法工作。
- 确认:npx ng build。
- MCP(若客户端受支持): claude:npx @taiga-ui/mcp init --client claude,写入 .mcp.json cursor:npx @taiga-ui/mcp init --client cursor,写入 .cursor/mcp.json vscode:npx @taiga-ui/mcp init --client vscode,写入 .vscode/mcp.json windsurf:npx @taiga-ui/mcp init --client windsurf,写入 ~/.codeium/windsurf/mcp_config.json(仅全局) opencode:npx @taiga-ui/mcp init --client opencode,写入 opencode.json codex:npx @taiga-ui/mcp init --client codex,写入 .codex/config.toml 构建通过即表示设置完成。
限制:资料未提供版本要求、兼容性细节、其他安装方式或失败排查说明。