How to configure gulp-typescript to work with JSPM when transpiling Angular2 TS

Question

We have a gulp script that looks like the following (only the relevant pieces shown):

const gulp = require('gulp');
const typescript = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const tscConfig = require('./tsconfig.json');
const inlineNg2Templates = require('gulp-inline-ng2-template');
const paths = {
    distAssetsFolder: 'dist/assets',
    distFolder: 'dist',
    distLibFolder: 'dist/lib',
    distFiles: 'dist/**/*',
    srcMapFolder: './maps',
    srcFiles: 'src/**/*',
    srcAssetFolder: 'src/assets/**/*',
    srcMainSassFile: 'src/**/main.scss',
    srcTsFiles: 'src/**/*.ts',
    srcTestFiles : 'src/**/*.spec.ts'
};
gulp.task('transpile-typescript', ['clean:dist'], function () {
    return gulp
        .src(paths.srcTsFiles)
        .pipe(inlineNg2Templates({ useRelativePaths: true}))
        .pipe(sourcemaps.init())
        .pipe(typescript(tscConfig.compilerOptions))
        .pipe(sourcemaps.write(paths.srcMapFolder))
        .pipe(gulp.dest(paths.distFolder));
});

We're using JSPM for our dependency management & have jspm-config.js at the root of our project.

Regardless of what task in our gulp script we run we get the following errors:

src\app\sidebar\panel.component.ts(1,46): error TS2307: Cannot find module 'angular2/core'. src\app\sidebar\panel.component.ts(2,30): error TS2307: Cannot find module 'angular2/http'. src\app\uiComponents\demo\demo.ts(1,25): error TS2307: Cannot find module 'angular2/core'. src\app\uiComponents\modal\modal.ts(1,54): error TS2307: Cannot find module 'angular2/core'. src\app\uiComponents\modal\modal.ts(2,23): error TS2307: Cannot find module 'angular2/common'.

However; the app works just fine. At runtime these errors are resolved by the map in our jspm-config.js file which contains something like the following:

"angular2": "npm:[email protected]",

I realize we just need to somehow reference the jspm config at transpile time but I'm just not sure how to do that at this point.

Does anyone have any ideas?

mmastrangelo mmastrangelo · Accepted Answer · 2016-04-15T20:18:41

Try using gulp-jspm. See documentation at: https://www.npmjs.com/package/gulp-jspm.

First set up your jspm config.js to use typescript as the transpiler and also to recognize ts files:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",

  packages: {
    "app": {
      "defaultExtension": "ts"
    }
  },

(...other settings...)
}

Then replace the call to typescript in your gulpfile with jspm. Example:

var jspm = require('gulp-jspm');

gulp.task("jspmBundle", function() {
    return gulp.src(TS_GLOB)
        .pipe(jspm())
        .pipe(gulp.dest(DIST_TARGET_PATH));
});

You can also set up your development environment to configure SystemJS to transpile on the fly. Read more about that here:

https://yakovfain.com/2015/10/13/starting-an-angular-2-project-with-typescript-and-jspm/

How to configure gulp-typescript to work with JSPM when transpiling Angular2 TS

1 Answers