Tersius Tersius - 1 year ago 78
Node.js Question

Browserify + browserify-ngannotate + Tsify not working

I'm using gulp with browserify and tsify. This has been working quite well. Then I decided to add ng-annotate using browserify-ngannotate.

I've added the ng-annotate browserify transform but it seems that if tsify is added as a plugin the ng-annotate transform is never called.

If I remove the tsify plugin then ng-annote gets called. I've played around and switched around the plugin/transform registration. Am I missing something here, or should I go and log an issue at browserify/tsify?

var browserify = require('browserify');
var browserSyncConfig = require('../config').browserSync;
var browserSync = require('browser-sync').get(browserSyncConfig.instance);
var watchify = require('watchify');
var tsify = require('tsify');
var ngAnnotate = require('browserify-ngannotate');
var mergeStream = require('merge-stream');
var bundleLogger = require('../util/bundleLogger');
var gulp = require('gulp');
var handleErrors = require('../util/handleErrors');
var source = require('vinyl-source-stream');
var config = require('../config').browserify;
var _ = require('lodash');

var browserifyTask = function (devMode) {

var browserifyThis = function (bundleConfig) {

if (devMode) {
// Add watchify args and debug (sourcemaps) option
_.extend(bundleConfig, watchify.args, {debug: true});
// A watchify require/external bug that prevents proper recompiling,
// so (for now) we'll ignore these options during development. Running
// `gulp browserify` directly will properly require and externalize.
bundleConfig = _.omit(bundleConfig, ['external', 'require']);

var b = browserify(bundleConfig);

if (bundleConfig.tsify) {
b = b.plugin(tsify, {
noImplicitAny: false,
target: 'ES5',
noExternalResolve: false,
module: 'commonjs',
removeComments: false

if (bundleConfig.ngAnnotate) {
b = b.transform(ngAnnotate);

var bundle = function () {
// Log when bundling starts

return b
// Report compile errors
.on('error', handleErrors)
// Use vinyl-source-stream to make the
// stream gulp compatible. Specify the
// desired output filename here.
// Specify the output destination

if (devMode) {
// Wrap with watchify and rebundle on changes
b = watchify(b, {
poll: true

// Rebundle on update
b.on('update', bundle);
} else {
// Sort out shared dependencies.
// b.require exposes modules externally
if (bundleConfig.require) b.require(bundleConfig.require);
// b.external excludes modules from the bundle, and expects
// they'll be available externally
if (bundleConfig.external) b.external(bundleConfig.external);

return bundle();

// Start bundling with Browserify for each bundleConfig specified
return mergeStream.apply(gulp, _.map(config.bundleConfigs, browserifyThis));


gulp.task('browserify', function () {
return browserifyTask()

// Exporting the task so we can call it directly in our watch task, with the 'devMode' option
module.exports = browserifyTask;

Answer Source

You can solve it by specify extensions in ng-annotate options.

bundler.transform(ngAnnotate, { ext: ['.ts', '.js'] });

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download