As most probably do, I have create a full guide to install the entire environment needed to run Cordova/Ionic. It constantly evolves and usually makes big jumps every 6 to 12 months. The following guide is my latest file, tailored for Ionic v1, as I had to install Ionic v1 on a new Mac to continue support for the older app. However, I found the same guide also works for newer versions of Ionic:
This setup guide, and caveats, was used to install the latest Node/Cordova/Ionic on Mac OSX 10.15.5 Catalina. If you experience different issues throughout the various steps, please post your step number, what the issue was and how you got around it - so others can benefit too.
Windows 10 - Install guide created Sept 1, 2021
Mac Setup Guide: iOS/Mac full environment install guide for Cordova/Ionic
============================================================
Lets get started
-
Download and Install JKD1.8.1_XXX (latest version)
NOTE: Cordova is still pinned to JavaJDK 1.8.XXX, you cannot use Java 11 here.
A. environment variables to add:
JAVA_HOME = “C:\Program Files\Java\jdk1.8.0_301”
B. add variables to PATH:
%JAVA_HOME%\bin
%JAVA_HOME%\lib
%JAVA_HOME%\jre
%JAVA_HOME%\jre\lib -
AndroidStudio
A. Update/Add all SDK packages
1. Open SDK Manger and add your required APIs, As of this guide:
a. SDK Platforms: Android recommends APIs 22-31 as support for < 22 (KitKat) is no more
2. SDK Tools:
a. Android SDK Built-Tools 30.0.3 (latest 31.0.0 has bugs)
b. Android SDK CLI Tools (latest)
c. Android SDK Platform-Tools (31.0.3)
d. Others: Android Emulater, Google USB/Web drivers, Intel x86 emulator accelerator - and whatever else you might need.
B. environment variables to add:
ANDROID_SDK_ROOT = “C:\Users\xxxxx\AppData\Local\Android\sdk”
ANDROID_HOME = %ANDROID_SDK_ROOT%
ANDROID_STUDIO = “C:\Program Files\Android\Android Studio” (or your path to studio)
C. Add variables to PATH:
%ANDROID_SDK_ROOT%\tools
%ANDROID_SDK_ROOT%\tools\bin
%ANDROID_SDK_ROOT%\platform-tools
%ANDROID_STUDIO%\jre
%ANDROID_STUDIO%\bin -
Install Gradle
A. highest version permissible for Ionic v1 is 6.9.1, there are breaking changes in 7.0
B. for windows, download gradle v6.9.1, and unzip.
C. copy/move folder ‘gradle-6.9.1’ to desired location
D. environment variables to add:
GRADLE = “C:\program files\gradle-6.9.1\bin”
E. Add Variables to Path:
%GRADLE% -
Download and install NPM MSI/Package
A. Verify NPM is up to date, from CLI: “npm install npm@latest -g” -
Install node:
A. CLI: “npm install node@latest -g”
// might have to run this one twice, it seems other items get installed on 2nd run -
Install Gulp-CLI (v2.3.0):
A. CLI: “npm install gulp-cli -g” -
NPM Audit to fix known issues
A. CLI: “npm audit fix” (might need to add “–force”) -
Install Cordvoa
A. “npm install cordova@latest -g” -
Install ionic-cli
A. “npm install -g @ionic/cli” -
Add App Project:
A. cd \users\xxx\dev
B. ionic start myApp tabs
C. OR specific Ionic version: ionic start myApp tabs --type=ionic1 --no-link
NOTE: Steps 11 through 14 can be done globally OR locally to your specific project. If you only have a single project the global npm install -g xPACKAGEx option might be all you need. If you have multiple projects that have different requirements, then you should probably consider using npm install --save-dev xPACKAGEx (from within the root of the project folder)
-
Install Additional Resources:
A. “npm install -g cordova-res@latest”
B. “npm install -g native-run@latest” -
Update existing modules from CLI:
A. “npm update -g fsevent@latest”
B. “npm update -g graceful-fs@latest”
C. “npm update -g chokidar@latest” -
Add GULP to project
A. As of Sept 2020, ionic/toolk-kit 3.2.4 now uses Gulp 4.x
OLD, pre kit 3.2.4
cd \users\xxx\dev\appName
npm install --save-dev gulp@3.9.1
(using gulp@4.x will break on Ionic v1)
(this will pin gulp@3.9.1 to specific project)NEW
Ionic toolkit 3.2.4+ uses Gulp 4 now (Sept 2020)
npm install -g gulp@latest (4.0.2)
For an Ionic v1 app, additional changes are needed, see below -
Add needed modules to project:
A. “npm update -g gulp-sass@latest” (to gulp-sass v5)
B. “npm install --save-dev sass@latest” (sass compiler) -
IONIC lib scss file has a syntax issue that needs to be fixed:
A. Manual fix for www/lib/ionic/scss/_platform.scss
B. Lines 80/81, both missing closing “)” -
IONIC Project gulpfile.js
A. Gulpfile.js created fromionic start myAppis formatted for v3.9.1
B. Update file for v4.X syntax (see below) -
Update Ionic Plugins:
A. ionic cordova plugins (list plugins)
B. verify each plugin against npm.com, if not latest plugin
1. ionic cordova plugin remove cordova-plugin-XXXX
2. ionic cordova plugin add cordova-plugin-XXXX@latest
C. If usingcordova-plugin-enable-multidex@latest, and most likely you will need to,
then you will need to add the following to your config.xml file:
<preference name="AndroidXEnabled" value="true" /> -
Add Android to Project:
A. ionic cordova platform add android@latest -
Build First app:
A. ionic cordova build android
*** begin troubleshooting any build issues (if any) -
Launch first app:
A. ensure an android phone is attached to computer
B. launch android daemon: adb devices -latest
C. ionic cordova run android --device -
Begin building your project with more plugins
A. ionic cordova plugin add cordova-plugin-xxxxxx
I hope this helps…anyone…and if you have corrections or things to add that can help others then please put them in the comments.
Happy coding:
==============================================
For Ionic v1 projects, the gulpfile.js is preformatted for gulp v3.9.1, it will need to be modified to work with gulp v4.x (ie: 4.0.2):
Default installed gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var paths = {
sass: ['./scss/**/*.scss']
};
gulp.task('default', ['sass']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(cleanCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', ['sass'], function() {
gulp.watch(paths.sass, ['sass']);
});
There are only a few changes, they are subtle, but the gulpfile.js needs to be modified to look like this:
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass')) ;
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');
var paths = {
sass: ['./scss/**/*.scss']
};
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(cleanCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function () {
gulp.watch(paths.sass, gulp.series('sass'));
});
gulp.task('default', gulp.series('sass','watch'));