0

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": {}
}
phip1611
  • 5,460
  • 4
  • 30
  • 57
  • 1
    Include your `tsconfig.json` as well as your `package.json` file. file in the question – Igor Mar 14 '17 at 11:43
  • done, I added everything you need to my question. Hopefully you can help me – phip1611 Mar 14 '17 at 11:49
  • I think you should try initialize your gulp-typescript from tsconfig aswell - so it will behave similar to raw tsc call. Something like this: `var tsProject = ts.createProject('tsconfig.json');` and then later on: `...tsProject.src().pipe(tsProject())...`. – Amid Mar 14 '17 at 12:36
  • I don't understand. It doesn't work.. ```gulp.task('tsc:release_dist', function() { var tsProject = tsc.createProject(releaseBuildDest+"/tsconfig.json"); tsProject.src().pipe(tsProject());``` ? – phip1611 Mar 14 '17 at 13:14
  • ```var tsProject = tsc.createProject(releaseBuildDest+"/tsconfig.json"); var tsResult = gulp.src(releaseBuildDest+'/**/*.ts').pipe(tsProject()); return tsResult.js.pipe(gulp.dest('TEST'))``` produces: dist\release\node_modules\@angular\router\upgrade.d.ts(10,31): error TS2307: Cannot find module '@angular/upgrade/static'. – phip1611 Mar 14 '17 at 13:18
  • Added example as an answer. See if it will help – Amid Mar 14 '17 at 15:58

1 Answers1

0

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));
});
Amid
  • 21,508
  • 5
  • 57
  • 54