Emulate/Run with livereload not working

Hi all,

We can build (ionic build ios) and run the app using xcode successfully.

But when trying to emulate the app with livereloading like this:
node_modules/ionic/bin/ionic emulate ios --livereload --consolelogs --serverlogs --debug

The simulator boots up but it hangs on the splash screen. The same is true when we try to run it on an actual device.

The standard output we get when running the above command is:

Function: bold]
[14:38:05] Starting ‘sass’…
[14:38:05] Finished ‘sass’ after 11 ms
[14:38:05] Starting ‘html’…
[14:38:05] Finished ‘html’ after 1.52 ms
[14:38:05] Starting ‘fonts’…
[14:38:05] Starting ‘scripts’…
[14:38:05] Starting ‘images’…
[14:38:05] Starting ‘ts’…
[14:38:05] Starting ‘ts.clean’…
[14:38:05] Finished ‘scripts’ after 48 ms
[14:38:05] Finished ‘ts.clean’ after 55 ms
[14:38:05] Starting ‘ts.preprocess’…
[14:38:05] Finished ‘images’ after 63 ms
[14:38:05] Finished ‘fonts’ after 114 ms
[14:38:05] Finished ‘ts.preprocess’ after 72 ms
[14:38:05] Finished ‘ts’ after 128 ms
[14:38:05] Starting ‘build’…
[Function: bold]
[14:38:16] Finished ‘build’ after 11 s
[14:38:16] Starting ‘emulate:before’…
[14:38:16] Finished ‘emulate:before’ after 5.12 μs

[Function: bold]
[Function: bold] undefined
[Function: bold] 0=www//*, 1=!www/lib//*
[Function: bold] ‘http://10.60.2.103:8100

There was an error serving your Ionic application for run [TypeError: Can’t call method on undefined]
TypeError: Can’t call method on undefined
at TypeError (native)
at module.exports (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/core-js/modules/_defined.js:3:28)
at createHTML (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/core-js/modules/_string-html.js:7:19)
at bold (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/core-js/modules/es6.string.bold.js:5:12)
at cb (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:206:7)
at done (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:167:19)
at /Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:40:16
at /Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:193:9
at Console.log (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/transports/console.js:127:3)
at emit (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:186:17)
at /Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:157:13
at _each (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:57:9)
at Object.async.each (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:156:9)
at Logger.log (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:214:9)
at target.(anonymous function) [as info] (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/common.js:54:18)
at Object.Serve.printCommandTips (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/lib/serve.js:211:18)
Error happened [TypeError: Can’t call method on undefined]
TypeError: Can’t call method on undefined
at TypeError (native)
at module.exports (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/core-js/modules/_defined.js:3:28)
at createHTML (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/core-js/modules/_string-html.js:7:19)
at bold (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/karma/node_modules/core-js/modules/es6.string.bold.js:5:12)
at cb (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:206:7)
at done (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:167:19)
at /Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:40:16
at /Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:193:9
at Console.log (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/transports/console.js:127:3)
at emit (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:186:17)
at /Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:157:13
at _each (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:57:9)
at Object.async.each (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/node_modules/async/lib/async.js:156:9)
at Logger.log (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/logger.js:214:9)
at target.(anonymous function) [as info] (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/node_modules/winston/lib/winston/common.js:54:18)
at Object.Serve.printCommandTips (/Users/pivotal/workspace/gnome-app/ionic-app/node_modules/ionic/node_modules/ionic-app-lib/lib/serve.js:211:18)
JS changed: www/build/js/app.bundle.js
JS changed: www/build/js/app.bundle.js.map

The relevant part of the gulp is:

‘use strict’;

var gulp = require(‘gulp’);
var sass = require(‘gulp-sass’);
var watch = require(‘gulp-watch’);
var del = require(‘del’);
var cache = require(‘gulp-cached’);
var glob = require(‘glob’);
var argv = process.argv;
var runSequence = require(‘run-sequence’);
var webserver = require(‘gulp-webserver’);
var preprocess = require(‘gulp-preprocess’);
var injectfile = require(‘gulp-inject-file’);
var typescript = require(‘typescript’);
var ts = require(‘gulp-typescript’);
var rimraf = require(‘gulp-rimraf’);

/**

  • Ionic Gulp tasks, for more information on each see
  • GitHub - ionic-team/ionic-gulp-tasks: Collection of gulp tasks for building Ionic apps
    */
    var buildBrowserify = require(‘ionic-gulp-browserify-typescript’);
    var buildSass = require(‘ionic-gulp-sass-build’);
    var copyHTML = require(‘ionic-gulp-html-copy’);
    var copyFonts = require(‘ionic-gulp-fonts-copy’);
    var copyScripts = require(‘ionic-gulp-scripts-copy’);

function remove(dir, done) {
return gulp.src(dir, {
read: false,
})
.pipe(rimraf(), done);
}

/**

  • Ionic hooks
  • Add ‘:before’ or ‘:after’ to any Ionic project command name to run the specified
  • tasks before or after the command.
    */
    gulp.task(‘serve:before’, [ ‘watch’ ]);
    gulp.task(‘emulate:before’, [ ‘build’ ]);
    gulp.task(‘deploy:before’, [ ‘build’ ]);
    gulp.task(‘build:before’, [ ‘build’ ]);

var env = process.env.GNOME_ENV;
if (env === undefined) {
process.env.GNOME_ENV = ‘dev’;
} else if (env !== ‘dev’ && env !== ‘prod’ && env !== ‘stage’) {
throw ‘invalid environment’;
}

// we want to ‘watch’ when livereloading
var shouldWatch = argv.indexOf(‘-l’) > -1 || argv.indexOf(‘–livereload’) > -1;
gulp.task(‘run:before’, [ shouldWatch ? ‘watch’ : ‘build’ ]);

var APP_MAIN = ‘tmp/final-ts/app/IonicApp.ts’;
var FINAL_TS = ‘tmp/final-ts’;
var FINAL_JS = ‘tmp/final-js’;
var APP_SRC = ‘src’;
var DIST = ‘www’;

/******************************************************************************

  • build
  • The following tasks are related to building the application with its assets.
    ******************************************************************************/
    gulp.task(‘sass’, function () {
    buildSass({
    src: ‘src/app/theme/app.+(ios|md).scss’
    });
    });

gulp.task(‘html’, function () {
copyHTML({
src: ‘src/app/**/*.html’
});
});

gulp.task(‘images’, function () {
return gulp.src(‘src/app/images/**/*.png’)
.pipe(cache(‘app_img’))
.pipe(gulp.dest(‘www/build/images’));
});

gulp.task(‘fonts’, copyFonts);

gulp.task(‘scripts’, copyScripts);

gulp.task(‘clean’, function (done) {
del(‘www/build’, done);
});

gulp.task(‘watch’, [ ‘sass’, ‘html’, ‘fonts’, ‘scripts’ ], function () {
watch(‘app/**/*.scss’, function () {
gulp.start(‘sass’);
});

watch(‘src/app/**/*.html’, function () {
gulp.start(‘html’);
});

var saneWatch = require(‘gulp-sane-watch’);
saneWatch(‘src/app/**/*.ts’, {
debounce: 500
}, function () {
gulp.start(‘ts’);
});

saneWatch(FINAL_TS, { debounce: 1000 }, function () {
console.info(‘Compiling JavaScript…’)
return buildBrowserify(
{
src: [ APP_MAIN, ‘./typings/main.d.ts’ ],
outputPath: ‘www/build/js/’,
debug: false
}
);
})
});

gulp.task(‘build’, [ ‘sass’, ‘html’, ‘fonts’, ‘scripts’, ‘images’, ‘ts’ ], function () {
return buildBrowserify({
src: [ APP_MAIN, ‘./typings/main.d.ts’ ],
outputPath: ‘www/build/js/’
});
});

Ionic info

Your system information:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.23
Ionic App Lib Version: 2.0.0-beta.13
ios-deploy version: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v4.2.0
Xcode version: Xcode 7.3 Build version 7D175

We are using

“ionic-angular”: “2.0.0-beta.3”,

We tried debugging this issue for about 5 hours without luck.

If there are any pointers or ideas that would be much appreciated!

Thanks,
Ben

2 Likes

At the moment, live reload on a device is a bit broken. It seems that there’s been some security changes in cordova that prevent livereload from working on a device. Sadly, there isn’t a whole lot that can be done.

1 Like

Hey @mhartington,

Any ETA or a workaround?

1 Like

Someone has posted a solution that is working for me:

3 Likes