gulp-typescript giving module not found error for angular2

0
votes

I use gulp-typescript to compile the angular2 app. I get the following error.

C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/async.d.ts(3,53): error TS2307: Cannot find module '@reactivex/rxjs/dist/cjs/Rx'. C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/async.d.ts(4,25): error TS2307: Cannot find module '@reactivex/rxjs/dist/cjs/Rx'. [12:18:32] TypeScript: 4 semantic errors C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/async.d.ts(5,22): error TS2307: Cannot find module '@reactivex/rxjs/dist/cjs/Operator'. C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/lang.d.ts(2,22): error TS2304: Cannot find name 'BrowserNodeGlobal'.

This is the gulp task.

paths.appJs = "app/**/*.ts";
paths.appNg2ComponentsJs = "ng2components/**/*.ts";
paths.appHtml = "app/**/*.html";
paths.appJsOut = paths.webroot + "app/";
paths.angualr2Typings = "node_modules/angular2/typings/";

gulp.task("compile-app-components", function () {

    var tscResult = gulp.src([paths.appNg2ComponentsJs, paths.angualr2Typings + "**/*.d.ts"])
        .pipe(tsc({
            "target": "es5",
            "module": "system",
            "declaration": false,
            "noImplicitAny": false,
            "removeComments": true,
            "noLib": false,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "sourceMap": true,
            "listFiles": true,
        }));

    return tscResult.js
        .pipe(gulp.dest(paths.appJsOut));
});
2
gulpangular
You don't need to feed gulp-typescript with .d.ts, it will find it automatically from angular 2. Start with that. - Jesus Rodriguez

2 Answers

1
votes

First, you should not add .d.ts definition files to your gulp build task:

paths.appJs = "app/**/*.ts";
paths.appNg2ComponentsJs = "ng2components/**/*.ts";
paths.appHtml = "app/**/*.html";
paths.appJsOut = paths.webroot + "app/";

gulp.task("compile-app-components", function () {    
    var tscResult = gulp.src([paths.appNg2ComponentsJs, paths.appJs])
        .pipe(tsc({
            "target": "es5",
            "module": "system",
            "declaration": false,
            "noImplicitAny": false,
            "removeComments": true,
            "noLib": false,
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            "sourceMap": true,
            "listFiles": true
        }));

    return tscResult.js
        .pipe(gulp.dest(paths.appJsOut));
});

Moreover, you need to write 

///<reference path="path/to/file.d.ts" />

lines at the beginning of your .ts scripts (i.e. to those in paths.appJs) where they are necessary (TypeScript compiler tells you when it does not know an identifier).

1
votes

If you are using JSPM the solution is move the tsconfig to wwwroot

Add the following line to the wwwroot/tsconfig.json so that systemjs won’t try to load sourcemaps:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": false
  },
  "exclude": [
    "jspm_packages"
  ]
}