Angular/Ionic安装配置汇总
一、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