typescriptkarma-runnerbrowserifytsify

Enable "Experimental support for decorators" with "tsify" in karma


I'm using tsify, a plugin for browserify, to transpile my code during karma unit tests.

I get this sort of erro when I run my tests:

TypeScript error: src/app/emailLogin/emailLogin.component.ts(14,14): Error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

How do enable experimentalDecorators in browserify/tsify, which are specified in my karma.config.js

Here is my karma.config.js:

module.exports = function(config) {
  config.set({
    browsers: ['Chrome'],
    frameworks: ['jasmine', 'browserify', 'es6-shim'],
    files: [
      'src/**/*.spec.ts'
    ],
    preprocessors: {
      '**/*.ts': ['browserify']
    },
    browserify: {
      debug: true,
      plugin: ['tsify'],
      transform: ['browserify-shim']
    }
  });
};

Here is my gulp file (I think this doesn't matter)

var gulp = require('gulp');
var Server = require('karma').Server;

/**
 * Run test once and exit
 */
gulp.task('test', function (done) {
  new Server({
    configFile: __dirname + '/karma.conf.js',
    singleRun: true
  }, done).start();
});

/**
 * Watch for file changes and re-run tests on each change
 */
gulp.task('tdd', function (done) {
  new Server({
    configFile: __dirname + '/karma.conf.js'
  }, done).start();
});

gulp.task('default', ['tdd']);

Solution

  • There are two compiler options that relate to decorators:

    --emitDecoratorMetadata
    --experimentalDecorators
    

    Typically, they would be enabled in your project's tsconfig.json file (tsify will search for and load the tsconfig.json):

    {
        "compilerOptions": {
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "target": "es5"
        },
        "files": []
    }
    

    If, for some reason, you are not using a tsconfig.json file, they can be enabled in the browserify plugin's configuration in Karma (note the array within the array):

    browserify: {
        debug: true,
        plugin: [['tsify', {
            emitDecoratorMetadata: true,
            experimentalDecorators: true
        }]],
        transform: ['browserify-shim']
    }
    

    And they can be enabled via the command line, too:

    browserify -p [tsify --emitDecoratorMetadata --experimentalDecorators] main.ts > bundle.js