乐趣区

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.orgnpm 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

退出移动版