前端智能化场景解决方案UI库matechat，如何安装环境项目

MateChat / Angular

前端智能化场景解决方案UI库，轻松构建你的AI应用。已服务于华为内部多个应用智能化改造，并助力CodeArts、InsCode AI IDE等智能化助手搭建。

特性

• 面向智能化场景组件库
• 开箱即用
• 多场景匹配
• 多主题适配

🖥️ 快速开始

1. 安装

如果你还没有新建项目，可以使用 Angular CLI 首先初始化一个angular项目：

$ npm install-g @angular/cli@cli@20.3$ ngnewmatechat-demo $ npm i @matechat/ng

错误解决：

npm error codeERESOLVEnpm errorERESOLVEunable to resolve dependency tree npm error npm error While resolving:matechat-demo@0.0.0npm error Found:@angular/common@21.0.4npm error node_modules/@angular/common npm error @angular/common@"^21.0.0"fromthe root project npm error npm error Could not resolve dependency:npm error peer @angular/common@"^20.3.0"from@matechat/ng@20.1.0npm error node_modules/@matechat/ng npm error @matechat/ng@"*"fromthe root project npm error npm error Fix the upstream dependency conflict,or retry npm errorthiscommandwith--force or--legacy-peer-deps npm error to accept anincorrect(and potentially broken)dependency resolution.npm error npm error npm error For a full report see:

根据错误信息，npm ERR! ERESOLVE unable to resolve dependency tree 是由于依赖冲突导致的。具体来说，项目中 @angular/common 版本为 21.0.4，而 @matechat/ng 需要 @angular/common 的版本为 20.3.0，存在版本不兼容问题。以下是解决方案：

手动降级 Angular 版本，修改 package.json，将 @angular/common 版本降级到 20.3.0：

"dependencies":{"@angular/common":"20.3.0"}

但是手动降级后，其它的都是高版本报错：

npm error codeERESOLVEnpm errorERESOLVEunable to resolve dependency tree npm error npm error While resolving:matechat-demo@0.0.0npm error Found:@angular/core@21.0.4npm error node_modules/@angular/core npm error @angular/core@"^21.0.0"fromthe root project npm error npm error Could not resolve dependency:npm error peer @angular/core@"20.3.0"from@angular/common@20.3.0npm error node_modules/@angular/common npm error @angular/common@"20.3.0"fromthe root project npm error npm error Fix the upstream dependency conflict,or retry npm errorthiscommandwith--force or--legacy-peer-deps npm error to accept anincorrect(and potentially broken)dependency resolution.npm error npm error npm error For a full report see:

解决方案：

$ npm install-g @angular/laster 更换为 $ npm install-g @angular/cli@cli@20.3

MateChat/Angular是一个面向智能化场景的UI组件库，已成功应用于华为内部多个AI应用的改造。其特性包括开箱即用、多场景匹配和多主题适配。安装时若出现npm依赖冲突（如Angular版本不兼容），可通过降级到@angular/cli@20.3版本解决。

具体步骤为：

• 1）使用指定版本初始化项目；
• 2）安装@matechat/ng组件库。

该方案有效解决了@angular/common与@matechat/ng之间的版本冲突问题。

MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home