Typescript Compiler doesn't find several npm packages (gulp-typescript)

Question

I'm using gulp-typescript to compile my typescript files. It works but it doesn't find external modules like "@angular/core". How can I configure TSC to look for these modules in node_modules?

PS: I'd like to bundle the typescript files with systemJS. Maybe I can somehow include the systemjs-config so that TSC knows where too look?

CODE:

gulp.task('tsc:release_dist', function() {
    return gulp.src(releaseBuildDest+'/**/*.ts')
        .pipe(gulpIgnore('node_modules/**'))
        .pipe(debug())
        .pipe(tsc({
            noImplicitAny: true,
            out: 'bundle.js',
            module: 'system'
        }))
        .pipe(gulp.dest(releaseBuildDest));
});

my project structure:

.dist/
..../release/
......./app/ (angular2 components, ...)
......./assets/ (css, img, ...)
......./node_modules/ (angular2 and other dependencies)
.......index.html
.......main.ts
.......systemjs.config.js

console output

[12:25:59] Using gulpfile C:\Develop\frontend\gulpfile.js
[12:25:59] Starting 'tsc:release_dist'...
[12:26:00] gulp-debug: dist\release\main.ts
[12:26:03] gulp-debug: dist\release\app\app.component.spec.ts
[12:26:05] gulp-debug: dist\release\app\app.component.ts
[12:26:05] gulp-debug: dist\release\app\app.module.ts
[12:26:05] gulp-debug: dist\release\app\components\afafc\authafafc\authafafc.component.ts
[12:26:05] gulp-debug: dist\release\app\components\afafc\langafafc\langafafc.component.ts
[12:26:06] gulp-debug: 6 items
dist\release\app\app.component.spec.ts(3,50): error TS2307: Cannot find module '@angular/core/testing'.
dist\release\app\app.component.spec.ts(4,20): error TS2307: Cannot find module '@angular/platform-browser'.
dist\release\app\app.component.spec.ts(5,30): error TS2307: Cannot find module '@angular/core'.
dist\release\app\app.component.ts(1,27): error TS2307: Cannot find module '@angular/core'.
dist\release\app\app.module.ts(2,31): error TS2307: Cannot find module '@angular/platform-browser'.
dist\release\app\components\afafc\authafafc\authafafc.component.ts(1,34): error TS2307: Cannot find module '@angular/core'.
dist\release\app\components\afafc\langafafc\langafafc.component.ts(1,34): error TS2307: Cannot find module '@angular/core'.
dist\release\main.ts(1,40): error TS2307: Cannot find module '@angular/platform-browser-dynamic'.

how my components are requiring these packages:

import { NgModule } from '@angular/core';

tsconfig.js

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Additional information: Everything works fine when I compile the regular dev build using "npm start" which is a shortcut to tsc -p src/. But I'm trying to build a "release build" gulp-task with bundled files. But If I copy everying to my release build directory and try to compile with tsc I get these errors shown above.

package json

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "my-project",
  "scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "build:release": "gulp build:release",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"gulp default:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "gulp": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "UNLICENSED",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "material-design-icons": "^3.0.0",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.0",
    "gulp-clean": "^0.3.2",
    "gulp-debug": "^3.1.0",
    "gulp-ignore": "^2.0.2",
    "gulp-jshint": "^2.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-npm-files": "^0.1.3",
    "gulp-refresh": "^1.1.0",
    "gulp-sass": "^2.2.0",
    "gulp-sass-lint": "^1.3.2",
    "gulp-sequence": "^0.4.6",
    "gulp-typescript": "^3.1.5",
    "gulp-util": "^3.0.7",
    "jasmine-core": "~2.4.1",
    "jshint": "^2.9.2",
    "jshint-stylish": "^2.1.0",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10"
  },
  "repository": {}
}

Answer 1

Try to set up your gulp typescript to use tsconfig information about your project. It might help. Below is an example that works for me just fine. Remove sourcemaps related parts if you do not need them.

var ts = require('gulp-typescript');
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build.js.dev', () => 
{
    var tsProject = ts.createProject('tsconfig.json');

    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())   
        .pipe(tsProject()); 

        //Write definitions 
        //tsResult.dts.pipe(gulp.dest(TEMP_TARGET_FOLDER)),
        //Write compiled js
    return tsResult.js.pipe(sourcemaps.write(
            ".", 
            { 
                includeContent: true, 
                sourceRoot: __dirname + "/dist"
            })).pipe(gulp.dest(TEMP_TARGET_FOLDER));
});