typescript - sourcemaps not working for ionic 2

Question

I'm using TypeScript with Ionic 2, but my sourcemaps is not working. I suppose something is wrong either with my TypeScript gulp task, but I cannot find the issue.

Here is my gulpfile.js

var gulp = require("gulp"),
    gulpWatch = require("gulp-watch"),
    del = require("del"),
    runSequence = require("run-sequence"),
    typescript = require("gulp-typescript"),
    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-es2015");
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", "typescript", "scripts"],
      function () {
          gulpWatch("app/**/*.scss", function () { gulp.start("sass"); });
          gulpWatch("app/**/*.html", function () { gulp.start("html"); });
          buildBrowserify({ watch: true }).on("end", done);
      }
    );
});

gulp.task("typescript", function () {
    var tsProject = typescript.createProject("tsconfig.json");
    var tsResult = tsProject
        .src()
        .pipe(typescript(tsProject));

    return tsResult.js.pipe(gulp.dest(function (f) {
        return f.base;
    }));
});

gulp.task("build", ["clean"], function (done) {
    runSequence(
      ["sass", "html", "fonts", "typescript", "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");
});

here is my tsconfig:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true
  }
  "exclude": [
    "node_modules"
  ]
}

Answer 1

So, I found the solution, here is how the ionic.config.json looks like

{
  "name": "project-name",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "defaultBrowser": "chrome"
}

Here is how the tsconfig looks like:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

here is how the gulp file looks like:

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');
});

And here is how to setup ionic2 project with typescript:

ionic start project-name blank --v2 --ts