Angular/Ionic安装配置汇总

无动于衷
• 阅读 2501

一、NodeJS

Angular和Cordova/Ionic都使用cli工具开发,因此必须先安装最新版本的NodeJS。NodeJS里面包含npm包管理器,而Angular/Ionic本身和程序依赖的库和框架都是npm包,要进行Angular/Ionic开发首先需要安装npm包管理器。

NodeJS的官网下载页:https://nodejs.org/en/download/

安装NodeJS的时候把npm一起安装就可以。

也可以安装yarn,下载依赖包的速度和稳定性会提升很多。可以参考 https://yarn.bootcss.com/

二、使用npm的淘宝镜像

直接下载npm库会很慢,很多时候会不成功。国内用户可以使用淘宝的npmjs.org镜像,加快下载速度。

淘宝镜像的官方使用说明在:https://npm.taobao.org/

官方的建议是安装cnpm代替npm,或者添加一个叫cnpm的别名。另一个方法是不使用cnpm,而是修改npm的默认镜像:

npm config set registry http://registry.npm.taobao.org/

如果想修改回默认的版本,可以这样:

npm config set registry https://registry.npmjs.org/

用 npm get registry 可以查看现在使用的是哪个镜像。

如果安装了yarn,可以这样设置镜像:

yarn config set registry http://registry.npm.taobao.org/

三、Angular安装

npm install -g @angular/cli

可参考官网:https://angular.cn/guide/quic...

cli命令可以参考:https://angular.cn/cli

四、Ionic4安装

安装cli: npm install -g ionic

Ionic cli的文档:https://ionicframework.com/do...

Ionic Native提供使用Angular风格调用原生组件的方法。

Ionic native的文档:https://ionicframework.com/do...

五、Ionic3安装

1.安装Ionic和Cordova的CLI

npm install -g ionic cordova

npm可以先安装或者配置淘宝镜像。

2.新建项目

在命令行中,进入项目目录的上级目录,然后执行 以下命令:

ionic start TestIonic tabs

其中,TestIonic是项目名,也是目录名,命令执行成功后,会自动在当前目录下创建一个名叫TestIonic的子目录,就是新建项目的目录。

后面的tabs表示新建项目的模板,tabs模板3个tab的布局,也可以使用其他官方模板:

tabs : a simple 3 tab layout

sidemenu: a layout with a swipable menu on the side

blank: a bare starter with a single page

super: starter project with over 14 ready to use page designs

tutorial: a guided starter project

此命令可能会出现网络连接错误:

[ERROR] Network connectivity error occurred, are you offline?

    If you are behind a firewall and need to configure proxy settings, see: https://ionicframework.com/docs/cli/configuring.html#using-a-proxy

解决方案,执行以下命令配置npm代理:

npm config set proxy= https://registry.npm.taobao.org
npm config set https_proxy=https://registry.npm.taobao.org

然后设置ionic的代理:

npm install -g @ionic/cli-plugin-proxy

添加环境变量 IONIC_HTTP_PROXY 值为代理服务器地址,比如

https://registry.npm.taobao.org

3.运行项目

ionic serve

复制地址到谷歌浏览器,然后按下F12,按左上角第二个按钮切换到手机模式,可以调试项目。

4.打包

打包android app,需要先安装gradle(网上说法如此,但实际编译过程中没有看到ionic使用了安装的gradle,反而自己下载了一个gradle)和android sdk,可参考https://blog.csdn.net/qq_2026...

ionic cordova build android --release --prod

上面命令可以打包成为android apk,并且在输出提示中显示apk文件的位置。

ionic cordova run android

上面命令生成apk文件并且直接安装到安卓手机上,但安卓手机必须用usb连接PC,而且进入开发者模式,启用usb调试,并且安装的时候一般需要在手机上做确认,否则安装失败。

ionic cordova emulate android

上面命令生成apk文件并且安装到安卓模拟器上运行,最好先启动安卓模拟器,如果没有启动安卓模拟器,ionic会自动启动缺省的安卓模拟器。

另外,上面两个命令也可以用cordova版本例如:

cordova run android

cordova emulate android

效率更高,不过事先必须先调用过ionic cordova build。

另外,以上ionic命令都可以加上选项-lc:

ionic cordova emulate android -lc

选项-lc有两个作用,一个是把console.info等输出信息输出到命令行上;另一个是可以使配置文件ionic.config.json中的proxies生效。

注意,-lc选项虽然可以让proxies生效,但只能用于调试,正式安装运行是无效的,需要用环境变量来控制。

5.android签名

运行

ionic cordova build android --release --prod

之后,在命令行输入以下命令:

keytool -genkey -v -keystore testionic.keystore -alias testionic.keystore -keyalg RSA -validity 36500

jarsigner -verbose -keystore testionic.keystore -signedjar tionic.apk app-release-unsigned.apk testionic.keystore

zipalign -v 4 txx.apk txx_aligned.apk

其中keytool和jarsigner是jdk的工具,需要配置jdk的path。zipalign是android sdk的工具,需要在android sdk下搜索其具体路径,但这个命令不一定需要执行,只是优化。

也可以直接在cordova build中直接签名

ionic cordova build android --release --prod -- -- --minSdkVersion=22 --keystore=testionic.keystore --alias=testionic.keystore --storePassword=123456 --password=123456

点赞
收藏
评论区
推荐文章
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Easter79 Easter79
3年前
vue 环境搭建笔记
环境开发工具:VSCodevue版本:2.x准备使用npm包管理器进行安装,也可以使用yarn包管理器。可以使用淘宝的npm镜像,国内速度更快。使用方式:$npminstallgcnpmregistryhttps://registry.npm.taobao.org
Stella981 Stella981
3年前
Scapy 从入门到放弃
0x00前言最近闲的没事,抽空了解下地表最强的嗅探和收发包的工具:scapy。scapy是一个python模块,使用简单,并且能灵活地构造各种数据包,是进行网络安全审计的好帮手。0x01安装因为2020年python官方便不再支持python2,所以使用python3安装。!(https://oscimg.oschina.net/os
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Stella981 Stella981
3年前
Html5混合开发环境的H5牛牛平台搭建
工具:AndroidSDK,JavaJDK,Node.js,Cordova、Ionic、python;1、androd需要配置:jdk路径和sdk配置;jdk配置环境变量:JAVA\_HOME:jdk安装目录,如:F:\\Java\\jdk1.8.0\_11%JAVA\_HOME%\\bin;%JAVA\_HOME%\\jre\\bi
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Stella981 Stella981
3年前
Node.js学习笔记(二、NPM 使用)
介绍NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
3年前
Ionic6使用组件出现错误:Did you add it to @NgModule.entryComponents
缘由在Ionic6和Angular8项目中使用组件时出现错误:Error:NocomponentfactoryfoundforLoginComponent.Didyouadditto@NgModule.entryComponents?在我的上一篇文章:移动开发:Ionic框架实现注册与登录功能(https:
无动于衷
无动于衷
Lv1
他乡生白发,旧国见青山。
文章
4
粉丝
0
获赞
0