Angular2 beta and gulp-tsc - Cannot find module 'angular2/core'

Question

I am trying to automate the typescript compilation with the new angular 2.0 beta.

The project structure is:

myapp
|--node_modules
     |---angular2
            |--core.d.ts
            |--...
|--lib
    |--resources
         |--app
             |--app.component.ts
|--typings
     |--..
.
|--package.json
|--gulpfile.js

app.component.ts excerpt:

import {Component, View} from 'angular2/core';
import {TechnologiesService} from './services';

When I run the typescript command (tsc) directly from the shell everything goes well and the javascript files are generated. However when I run my gulp compile task there are some errors because it doesn't find angular2/core and angular2/platform/browser modules. Why?

[16:35:55] Using gulpfile C:\dev\myapp\gulpfile.js
[16:35:55] Starting 'compile-ts'...
[16:35:55] Compiling TypeScript files using tsc version 1.8.2
[16:35:56] [tsc] > lib/resources/app/app.component.ts(1,46): error TS2307: Cannot find module 'angular2/core'.
[16:35:56] [tsc] > lib/resources/app/app.component.ts(44,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.
[16:35:56] [tsc] > lib/resources/app/main.ts(1,28): error TS2307: Cannot find module 'angular2/platform/browser'.
[16:35:56] Failed to compile TypeScript: Error: tsc command has exited with code:2

events.js:154
      throw er; // Unhandled 'error' event
      ^
 Error: Failed to compile: tsc command has exited with code:2

gulpfile typescript compilation task:

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var typescript = require('gulp-tsc');
gulp.task('compile-ts', function(){
  return gulp.src(['./lib/resources/app/**/*.ts'])
    .pipe(typescript({"target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true,
                      "experimentalDecorators": true, "emitDecoraasdftorMetadata": true, "removeComments": false,
                      "noImplicitAny": false}))
    .pipe(gulp.dest('./public/app/'));
});

Do you have typings installed and included? Eg. /// <reference path="../typings/main.d.ts" /> — martin
– martin, Commented Mar 1, 2016 at 15:53
When I ran npm install the typings folder was created (myapp/typings). Just tried adding /// <reference path="../../../typings/main.d.ts" /> but still complains about angular2/core. Also put /// <reference path="../../../node_modules/angular2/core.d.ts" />and nothing changes. — codependent
– codependent, Commented Mar 1, 2016 at 16:01
I'm guessing this is a working directory issue. Have you tried specifying rootDir? — Jack Guy
– Jack Guy, Commented Mar 1, 2016 at 16:03
@Harangue yes, it seems related to the working dir. I tried setting "sourceRoot: "./" as parameter in .pipe(typescript({}) but same result...Other test with "sourceRoot: "../../../", etc... — codependent
– codependent, Commented Mar 1, 2016 at 16:09
Do you have a local typescript installation? You could try using the global one. — Jack Guy
– Jack Guy, Commented Mar 1, 2016 at 16:13

rmchndrng · Accepted Answer · 2016-04-25 11:42:18Z

0

I am using gulp-typescript instead of gulp-tsc and the following gulpfile.js is working perfectly with tsconfig.json file specified.

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

gulp.task('build:client', function () {
    var tsProject = ts.createProject('client/tsconfig.json');
    var tsResult = gulp.src([
        'client/**/*.ts',
        '!client/typings/main/**/*.ts',
        '!client/typings/main.d.ts'
    ])        
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject))
    return tsResult.js
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('server'))
});

gulp.task('default', ['build:client']);

My tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "rootDir":"./"    
  },
  "exclude": [    
    "typings/main",
    "typings/main.d.ts"
  ]
}

To install Typings

npm install typings --save-dev

Initialize the typings.json

typings init

To Install Typings for "es6-collections" and "es6-promise"

typings install es6-collections --ambient --save
typings install es6-promise --ambient --save

edited Apr 25, 2016 at 11:42

answered Apr 23, 2016 at 22:53

rmchndrng

8621 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

codependent Over a year ago

I just tested it and got 76 semantic errors: dopangular/node_modules/angular2/platform/browser.d.ts(77,90): error TS2304: Cannot find name 'Promise'.,

/dopangular/node_modules/angular2/src/core/change_detection/differs/default_keyvalue_differ.d.ts(23,15): error TS2304: Cannot find name 'Map'.

, etc. On the other hand, although the sourcemap files are missing, the .js files are correctly generated and the application runs ok. Any idea why I got those errors? Why aren't there any sourcemap files?

rmchndrng Over a year ago

The compilation errors are shown because it could not find the typings for the mentioned entities. Try installing the ambient typings for "es6-collections" and "es6-promise". The sourcemap is appended into the js files generated.

codependent Over a year ago

I'm completely new to ts... how do I install the ambient typings? Thanks for helping me out ;-)

codependent Over a year ago

Unfortunately I still get the same errors. Could you have a quick look at the project? github.com/codependent/dopangular/tree/beta. Thanks so much.

rmchndrng Over a year ago

While installing a typing, it provides you with with 2 versions, one for the browser and one for node. In our case we need to exclude the type definitions meant for node in gulp.src.. Like the one in my answer..

|

Collectives™ on Stack Overflow

Angular2 beta and gulp-tsc - Cannot find module 'angular2/core'

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related