1、需求背景
因部门要求使用angular作为基础的前端框架，也因为近期需要搭建一套新的移动端H5，故此有采用angular17+ionic7集成搭建项目。
2、搭建步骤
- 环境安装
本地开发环境需要需要安装以下版本：
node 20.9.0
angular-cli 17.2.2
ionic-cli 7
bash
## 先版本采用cli方式安装
npm i -g @ionic/cli@7
## 安装angular脚手架
npm i -g @[email protected]- 搭建NG-ZORRO-MOBILE移动端项目
地址：NG-ZORRO-MOBILE - Ant Design Mobile Of Angular根据ng-zorro-mobile官方网站的Ionic中使用章节介绍步骤：NG-ZORRO-MOBILE - Ant Design Mobile Of Angular
bash
ionic start your project name
bash
ng add [email protected]如果采用ng add ng-zorro-antd-mobile方式，则会自动帮你添加ng所需要的各种配置或者包了。
但是需要注意的是：\src\app\app.component.html的页面内容需要修改回来：
html
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>如果采用npm install ng-zorro-antd-mobile --save方式，则需要自行配置：
（1）app.modules.ts 中，全局引入 ng-zorro-antd-mobile。
（2）angular.json 中，全局引入 ng-zorro-antd-mobile样式。
bash
npm install ng-zorro-antd-mobile --save- 运行项目
bash
ionic serve按照以上即可搭建一个完整的项目了。
3、图标使用
如果你觉得两个UI框架的图标都不太满意，但是自身又不会UI画图切图的话，那么可以使用阿里的图标矢量图：iconfont-阿里巴巴矢量图标库