Ionic2 + Cordova + Angular2 pack Android app environment build

Source: Internet
Author: User
Tags android sdk manager

First, preface

Some time ago, the company has an app project needs to support different platforms, so the use of Ionic2 + Cordova + ANGULAR2, in the process of building the environment encountered a lot of problems, just recently have time to sort out.

Second, the development environment construction

Refer to this site steps to build:Https://github.com/DonaldTdz/Ionic2QuickStart

Note: Nodejs to install 6.0 +lts the latest version, do not install 8. Latest version of X (https://nodejs.org/en/)

Cordova version to install the 6.X version, the current cordova-android version can only support up to 6.x.x

CMD:CNPM install–g Ionic [email protected]

Cmd:ionic–v cordova–v View display version number, installation successful

Third, run a ionic seed project

:https://github.com/DonaldTdz/ionic-seed

Open terminal input command with VS code: CNPM Install

Ionic Serve Run Project

Web-side running project is successful, development environment is built

Let's start packing to Android APP

Four, Cordova packaging Android Platform Environment construction

Refer to official notes:

(English)http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html

(English)http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

Note: Chinese Web site information is not up-to-date, access speed is relatively fast, English update to the latest, but the speed of access is slow

1. Installing the Java SDK

Java Development Kit (JDK)

Install Java Development Kit (JDK) 7 or the latest.

When installing on Windows, you need to set environment variables based on the JDK path JAVA_HOME (see Setting environment variables)

Cmd:java–version display version number installed successfully

Java SDK Environment variable configuration

Java_home Configuring the installation directory

Path configuration:%java_home%\bin

Add CLASSPATH:.; %java_home%\lib; (Note: If this environment variable exists, it needs to be checked )

2. Install Android SDK Tools

(Note: If you need to add Cordova Plugin, recommended to install Android Studio)

Android SDK

Install Android stand-alone SDK or Android Studio. If you plan to develop a new Cordova Android plugin or use the native tools of the Android platform to run and debug, then use Android Studio. Otherwise, Android stand-alone SDK tools is enough to build and deploy Android apps.

Detailed installation instructions can be viewed by clicking on the installation link above.

3. Add Android SDK Package

Add SDK Package

After installing the Android SDK, you will need to install any SDK packages that you want to target API level. It is recommended that you install the highest-level SDK packages supported by Cordova-android (see above).

Open the Android SDK Manager (for example, run ' Android ' on the terminal) and make sure that the following is installed:

    1. Target Android version of Android Platform SDK
    2. Android SDK Build-tools, version 19.1.0 or above
    3. Android support Repository (found in "Extras")

See the Android Documentation Installation SDK package for detailed information.

Open the newly downloaded project terminal run: Cordova platform LS View Cordova Android dependent Android SDK version

The following list depends on the Android API level is 16-25 (Http://cordova.apache.org/docs/en/latest/guide/platforms/android/ index.html)

then download the corresponding dependency package

Configure environment variables after successful installation

Android_home:

D:\Program FILES\ANDROID\ANDROID-SDK

Path:

D:\Program Files\android\android-sdk\platform-tools

D:\Program Files\android\android-sdk\tools

CMD:android–h View as shown below indicates successful installation

V. Pack Android APP

1. Add Android Platform

Ionic Cordova Platform Add Android

2, rely on gradle modification to the local

The reason is that the foreign website packaging runs slowly or causes failure, you know

:https://services.gradle.org/distributions/

(Note: Download slow download tools such as thunder)

Download version selection, first search Distributions/gradle

Below we need version:gradle-2.14.1-all.zip, avoid the wrong version

Download complete without decompression, copy directly to the following path of your project:

\app\platforms\android\gradle (Note: If there is no need to build one, pay attention to spelling errors)

Open the file you just searched for: \platforms\android\cordova\lib\builders\gradlebuilder.js

Remove the original comment and modify it to the local package. /gradle-2.14.1-all.zip

3. Packaging applications

Ionic Cordova Build Android

An APK phone installation package file will be output when the package is complete

Install to the phone to run successfully!!

VI. application signing and startup optimization

1. Generate Signature Key

Sign an app

First you should read the Android app signature required.

Use flags

To sign an application, you need the following parameters:

Parameters logo Description
Keystore --keystore Binary file path used to store a set of keys
Keystore Password --storePassword KeyStore Storage Key
Alias --alias Used to specify a private key for signing
Password --password Password for private key
Types of KeyStore --keystoreType Default: Automatic detection based on file name extension
PKCS12 or JKs

These parameters can be specified by the above Cordova CLI build or run command line arguments.

Note : You should use two underscores -- to represent these platform-specific parameters, such as:

cordova run android --release -- --keystore=../my-release-key.keystore --storePassword=password --alias=alias_name --password=password.

CMD to directory: D:\projects\dev\tz\saas\app\platforms\android (Android platform root directory)

Cmd:keytool-genkey-alias tzky.keystore-keyalg rsa-validity 40000-keystore tzky.keystore

Complete the input according to input prompts, refresh the Android platform root directory after successful generation

2. Signature Application and Packaging

Cordova build Android--release----keystore= ". \tzky.keystore "--storepassword=yk1234--alias=tzky.keystore

(Note: Automatic generation of packaged profiles release-signing.properties need to be aware of tzky.keystore placement paths to match)

Manually add the Release-signing.properties file and modify:

Run directly when add is complete:Cordova build Android–release

3, optimize the starting speed

Ionic Cordova Build Android--prod–release

(Note: Code optimization is required and if there is an error, modify it according to the error)

Start optimization reference:http://blog.csdn.net/u010564430/article/details/61201769

Add the following to the CONFIG. File:

<preference name= "Autohidesplashscreen" value= "false"/>

<preference name= "fadesplashscreenduration" value= "/>"

<preference name= "SplashScreen" value= "screen"/>

<preference name= "ShowSplashScreen" value= "true"/>

<preference name= "Showsplashscreenspinner" value= "false"/>

<preference name= "Splashshowonlyfirsttime" value= "false"/>

<preference name= "Fadesplashscreen" value= "true"/>

Ionic2 + Cordova + Angular2 pack Android app environment build

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.