Skip to main content
 

Error: Android SDK not found. Make sure that it is installed. If it is not at the default location, set the ANDROID_HOME environment variable.

3 min read

This error has plagued me for a week now.  Everything was working fine until Android Studio decided to prompt me for updates which I did.  Then suddenly I can't build any android apks with cordova.  The frustrating thing is the wording of this error is so common for misconfigurations that trying to track down a solution has been an exercise of pure frustration.

After much digging around and trial and error what appears to have happened is the latest build of Android Studio has changed the file structure of how it's storing the sdk such that cordova can't find all of the required files even if the $ANDROID_HOME system variable is correct which makes the error message even more difficult as it points to an incorrect root cause of the error.

So for anyone else running into this - I completely nuked Android Studio.  I was only using it for the sdk manager anyway.  As far as I can tell Android Studio in it's current format won't work with cordova cli.

Delete the entire contents of ~/Library/Android/sdk

I downloaded the command line tools package from here: https://dl.google.com/android/repository/tools_r25.2.3-macosx.zip (as per the page: https://developer.android.com/studio/index.html).  Note that this location is new since the latest release and as of this writing many search results for command line tools installation are out of date.

 

Unzip the file and copy the resulting tools directory to ~/Library/Android/sdk/tools

Open up the sdk manager with

~/Library/Android/sdk/tools/android sdk

With the sdk manager I installed:

API 25

- SDK Platform

- Android TV Intel x86 Atom System Image

- Google APIs ARM 64 v8a System Image

- Google APIs ARM EABI v7a System Image

- Google APIs Intel x86 Atom_64 System Image

- Sources for Android SDK

API 22

- SDK Platform

- Sources for Android SDK

API 21

- SDK Platform

- Sources for Android SDK

 

After attempting a new build it looks like it got further but I was greeted with an error of: Error: Please install Android target: "android-23".

So I additionally installed

API 23

- SDK Platform

 

Next build - new error:

 

FAILURE: Build failed with an exception.

 

* What went wrong:

A problem occurred configuring root project 'android'.

> Could not resolve all dependencies for configuration ':_armv7DebugCompile'.

 

Followed by a list of cordova plugins that had errored out on the build.  I took the armv7 part of that as a hint and installed:


API 23

- Google APIs ARM EABI v7a System Image

 

When that didn't work, I tried to be smarter and searched for solution first - stackoverflow had at least one resolved hit: http://stackoverflow.com/questions/33675491/could-not-resolve-all-dependencies-for-configuration-armv7debugcompile

So I installed:

 

Extras

- Android Support Repository

- Google Play Services

- Google Repository

 

Finally I got a build to work.  I have yet to test the resulting apk, but I'm assuming it's good.

 

Ionic 2 + Electron

5 min read

On a whim (as almost all my self-enforced learning curves tend to be) I decided to try getting Ionic 2 running inside of Electron.  I’ve never used Electron before, but had previously read the docs and had a vague understanding of it.  That said, I did the easy thing and googled for any ready-made solutions.  Mostly what I got were threads of people trying to get it working and either failing and giving up, or never posting again.  The few examples I found where people did get it working no longer worked at the time of this writing (Ionic 2.2.0).

After some trial and error with different suggestions cobbled together from different sources I finally got the Ionic 2 tutorial project running in Electron!  It complained about the lack of cordova.js in the console log, but that’s not technically required for the tutorial… a minor inconvenience for now.

 

Ionic tutorial running in electron

 

Note, I apologize, but I didn’t keep track of each reference/site I found nuggets of info on to get me to this point.  Just be aware that most of this was figured out by people smarter than me and I just managed to aggregate the right things in the right order to get somewhere.  Sorry if you were my source and you’re upset about not being mentioned…

 

Anyway, getting this far gave me hope, so I copied my considerably larger and more complicated project and got to work.

In the project root create a file "electron.copy.js"

// this is a custom dictionary to make it easy to extend/override
// provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts'
// then provide an object with a `src` array of globs and a `dest` string

module.exports = {
  copyAssets: {
    src: ['{{SRC}}/assets/**/*'],
    dest: '{{WWW}}/assets'
  },
  copyIndexContent: {
    src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json'],
    dest: '{{WWW}}'
  },
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyPolyfills: {
    src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
    dest: '{{BUILD}}'
  },
  copySwToolbox: {
    src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
    dest: '{{BUILD}}'
  }
}

 

 

In the project root create a file "main.js"

const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "www/index.html"),
    protocol: "file:",
    slashes: true
  }));

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on("closed", function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  };
})

app.on("activate", function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow();
  };
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

 

Edit package.json and add to dev dependencies:   

"electron": "^1.6.2"

 

  Edit package.json and change the build script

"scripts": {
    "start": "electron .",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "electron": "ionic-app-scripts build --copy electron.copy.js",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },



Edit package.json and add the main.js

"main": "main.js"


Install Electron and dependencies

$ npm install

 

Build the project

$ npm run electron



Start the application

$ npm start

 

and we have a working application!  I clicked around and tested a few things.  It appears to be working, making calls to the external API and getting correct responses.  Cool!

 

 

Still some things to figure out, like whether I should get cordova loaded or not, whether it will export as an app nicely, whether there is a good way to do this that can keep the codebase the same and still build for mobile/web, whether I can make this work with a browser production build… those are less interesting details though and can wait for another sleepless learning curve night.  I'll update this post if I find better ways of doing things with this.

 

[edit 1] - simplified issue with polyfills copying

[edit 2] - created electron-specific build command

[edit 3] - added browser platform and attempted to use browser prod build in ionic - seems to work, but my app needs work with the browser cordova implementation so not sure where issues from that vs electron start/end.

Anyway for that to work I created electron-prod.sh

ionic build browser --prod
rm -rf www/*
cp -r platforms/browser/www/* www/
npm start

This uses the browser prod build in electron, does so by building for browser prod, then copying the prod files into the local www folder before starting electron.

 

First custom component complete, I feel like I just leveled up!

 

Javascript environments... this hits close to home

After starting to work with Meteor, learning the ins and outs of node.js, mongoDB, and the blaze templating system, I was just starting to get somewhere with it and they changed everything in favor of moving to ReactJS.  No logical migration, just a "rewrite it all in React" statement.  I gave up, screw that, I had sunk a ton of time into learning that platform just to have the rug pulled out.

Now I'm getting into Ionic/Angular, also node based with a build step that used to use gulp but now uses rollupjs.  This stuff is pretty insane and changes way too fast.  Ionic 2 is completely different from Ionic 1, I like it, so I'm sticking with it, but damn if it isn't a ton of work to keep up with all this.

Javascript environments... this hits close to home
 

Ionic 2 Release Candidate

This is exciting, and is really perfect timing for a project I'm about to start.  Lots of breaking changes since the last beta though.

Ionic 2 Release Candidate
 

Ionic 2 Beta 9 is out

My project in it is coming along nicely and I enjoy working in it.

Ionic 2 Beta 9 is out
 

This week I've successfully worked in Elgg, Ionic 2, CakePHP, Laravel, and Magento. Next week will include Wordpress :(

 

Ionic 2 Beta 8 released

I'm starting to really like this framework.  Already building my first app in the beta.

Ionic 2 Beta 8 released
 

Ooh, got translations working in Ionic 2. The things that excite me :)

 

On vacation in Florence reading @joshuamorony 's Ionic 2 book (yep, that's me) and the TS update appears... Thx Josh!