angular17+ionic7集成开发

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 @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

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

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

3、图标使用

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

相关推荐
sdgsdgdsgc19 分钟前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98419 分钟前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66686 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能