Angular/Ionic安装配置汇总

1、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/

2、使用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/

3、Angular安装

npm install -g @angular/cli

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

cli命令能够参考：https://angular.cn/cli

4、Ionic4安装

安装cli: npm install -g ionic

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

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

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

5、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