Why can't I view source maps with Angular and Browserify?

Question

I am trying to step into the Browserify world. I am using a this tutorial as a starter. The source maps work fine. As soon as I require in angular the source maps disappear. Here is my browserify task.

gulp.task('browserify', function(){
    return browserify({
            entries: ['./src/javascript/app.coffee'],
            extensions: ['.coffee', '.hbs']
        })
        .bundle({debug: true})
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(gulp.dest('./build/'));
});

I am passing in the debug: true flag. Is it even possible to make source maps with angular?

Answer 1

I believe you have the debug flag in the wrong location, try moving it into the call to browserify().

gulp.task('browserify', function(){
    return browserify({
            entries: ['./src/javascript/app.coffee'],
            extensions: ['.coffee', '.hbs'],
            debug: true //moved to here
        })
        .bundle()
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(gulp.dest('./build/'));
});