Hi,
I recently updated my Ionic 2 project written in TypeScript to the latest version (from beta 19 to beta 25), and I switched from webpack to browserify, too. While using webpack, I was able to debug the project using WebStorm and Chrome or the Chrome Developer Tools inspecting the WebView in a real Android device. However, using browserify, I cannot debug the project anymore on a real device. The source folder appears if the application is launched in Chrome or with the live reload mode in Android, but when using ionic run android the WebView inspected from the DevTools does not include/show source folder, so there is no way of placing breakpoints in TypeScript files.
Does anyone faced the same problem? How can I solve it? Any help would be really appreciated.
Thanks in advance,
Xavi
How to reproduce the problem:
- Create a new Ionic 2 project with --v2 --ts (for example with the tabs template).
- type:
$ ionic platform add android
$ ionic run android - Open Chrome and go to this location:
chrome://inspect/#devices - Your real device name attached to a USB port should appear at this page, click on inspect to debug the WebView.
- source folder is missing and TypeScript files cannot be debugged.
Edit: I have updated my build and config files with the latest changes available at https://github.com/driftyco/ionic2-app-base/tree/typescript, but the problem still persists.
Additional information
My system information:
Cordova CLI: 6.1.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.4.3
Xcode version: Xcode 7.2.1 Build version 7C1002
gulpfile.ts:
var gulp = require('gulp'),
gulpWatch = require('gulp-watch'),
del = require('del'),
runSequence = require('run-sequence'),
argv = process.argv;
/**
* 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']);
// we want to 'watch' when livereloading
var shouldWatch = argv.indexOf('-l') > -1 || argv.indexOf('--livereload') > -1;
gulp.task('run:before', [shouldWatch ? 'watch' : 'build']);
/**
* Ionic Gulp tasks, for more information on each see
* https://github.com/driftyco/ionic-gulp-tasks
*
* Using these will allow you to stay up to date if the default Ionic 2 build
* changes, but you are of course welcome (and encouraged) to customize your
* build however you see fit.
*/
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');
var isRelease = argv.indexOf('--release') > -1;
gulp.task('watch', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
buildBrowserify({ watch: true }).on('end', done);
}
);
});
gulp.task('build', ['clean'], function(done){
runSequence(
['sass', 'html', 'fonts', 'scripts'],
function(){
buildBrowserify({
minify: isRelease,
browserifyOptions: {
debug: !isRelease
},
uglifyOptions: {
mangle: false
}
}).on('end', done);
}
);
});
gulp.task('sass', buildSass);
gulp.task('html', copyHTML);
gulp.task('fonts', copyFonts);
gulp.task('scripts', copyScripts);
gulp.task('clean', function(){
return del('www/build');
});
tsconfig.json (note that I removed sourceMap: true used by webpack):
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false
},
"filesGlob": [
"**/*.ts",
"!node_modules/**/*"
],
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
packages.json:
{
"dependencies": {
"angular2": "2.0.0-beta.15",
"es6-shim": "^0.35.0",
"ionic-angular": "2.0.0-beta.6",
"ionic-native": "^1.1.1",
"ionicons": "3.0.0",
"ng2-translate": "^1.11.1",
"rxjs": "5.0.0-beta.2"
},
"devDependencies": {
"del": "2.2.0",
"gulp": "3.9.1",
"gulp-watch": "4.3.5",
"ionic-gulp-browserify-typescript": "^1.1.0",
"ionic-gulp-fonts-copy": "^1.0.0",
"ionic-gulp-html-copy": "^1.0.0",
"ionic-gulp-sass-build": "^1.0.0",
"ionic-gulp-scripts-copy": "^1.0.1",
"run-sequence": "1.1.5"
},
"name": "demo",
"description": "demo: An Ionic project",
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
"cordova-plugin-inappbrowser",
{
"variables": {
"SENDER_ID": "XXXXXX"
},
"locator": "https://github.com/phonegap/phonegap-plugin-push",
"id": "phonegap-plugin-push"
},
"cordova-sqlite-storage",
"cordova-plugin-file",
"cordova-plugin-file-transfer"
],
"cordovaPlatforms": [
"ios",
"android"
]
}
,