angular17+ionic7集成开发

Mercury_@222024-03-09 22:05

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

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

node 20.9.0

angular-cli 17.2.2

ionic-cli 7

bash 复制代码

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

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

bash 复制代码

ionic start your project name

bash 复制代码

ng add ng-zorro-antd-mobile@10.0.0

如果采用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

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

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