angular17+ionic7集成开发

1、需求背景

因部门要求使用angular作为基础的前端框架，也因为近期需要搭建一套新的移动端H5，故此有采用angular17+ionic7集成搭建项目。

2、搭建步骤

• 环境安装

本地开发环境需要需要安装以下版本：

node 20.9.0

angular-cli 17.2.2

ionic-cli 7

## 先版本采用cli方式安装
npm i -g @ionic/cli@7

## 安装angular脚手架
npm i -g @angular-cli@17.2.2

• 搭建NG-ZORRO-MOBILE移动端项目

地址：NG-ZORRO-MOBILE - Ant Design Mobile Of Angular根据ng-zorro-mobile官方网站的Ionic中使用章节介绍步骤：NG-ZORRO-MOBILE - Ant Design Mobile Of Angular

ionic start your project name

ng add ng-zorro-antd-mobile@10.0.0

如果采用ng add ng-zorro-antd-mobile方式，则会自动帮你添加ng所需要的各种配置或者包了。

但是需要注意的是：\src\app\app.component.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样式。

npm install ng-zorro-antd-mobile --save

• 运行项目

ionic serve

按照以上即可搭建一个完整的项目了。

3、图标使用

如果你觉得两个UI框架的图标都不太满意，但是自身又不会UI画图切图的话，那么可以使用阿里的图标矢量图：iconfont-阿里巴巴矢量图标库