Gulp fails on type definitions added via typings while VS2015 has no problem

Next issue we face in our journey towards ionic2 is some crazy issue with gulp. Please see this demo for a reproduction.

Gulp build fails on typescript definitions imported via typings, e.g. we added ampqplib via npm, then issued typings install amqplib --save, then included amqplib typedefs via
import * as Amqp from 'amqplib/callback_api';
in page3.ts

Interesting enough VS2015 sees the definition and you can use “goto definition”, no errors are indicated in editor.

We also issued a prebuild event in VS2015 that performs a gulp clean and build, as described here and here.

Error message is Error TS2307: Cannot find module ‘amqplib/callback_api’.

Since I am not a gulp hero I kindly ask you to take a look at the code and give some advice.

Thanks!

Hi @Daixtrose, I’m not able to repro your problems, however I found something that can help you.

  1. be sure that you can build typescript calling “tsc” from the root of the project

  2. I found that the typings added by amqplib create a duplicate error if you don’t exclude some folders in the tsconfig

  3. So I added the next two lines to tsconfig/exclude

    “typings/modules”,
    “typings/index.d.ts”

Can you try to clone your repo again and see if the error is fixed?

If you add those lines to tsconfig, VS will tell you again that module amqplib/callback_api cannot be found:

Reading some docs about gulp.js and how tasks work, I found myself asolution and it is quite simple. In gulpfile.js, there is a variable that needs the ionic-gulp-browserify-typescript library. This library uses Browserify to transpile and bundle the TypeScript source files.:

var buildBrowserify = require('ionic-gulp-browserify-typescript');

As you can see in the npm API doc of the library, there is an option (src) which says:

  • src (string|File|Array) String, file object, or array of those types (they may be mixed) specifying Browserify entry file(s). Default: [‘./app/app.ts’, ‘./typings/main.d.ts’].

When you install the typescript definitions for the library via typings install amqplib --save, it sometimes creates its own index.d.ts file inside typings directory, so the gulp builder and Browserify will ignore it:

image

###Posible solutions:

  • The first one: Add index.d.ts to the library src field (not recommended):

Everything you have to do is adding the index.d.ts file to the src field at node_modules > ionic-gulp-browserify-typescript > index.js, like this:

src: ['./app/app.ts', './typings/main.d.ts', './typings/index.d.ts'],

I would say it is not recommended because you are changing code in the library itself, and it is never a good idea if you don’t know exactly how it works.

  • The second one: Add the references to main.d.ts:

You only need to copy the content from index.d.ts

/// <reference path="globals/amqplib/index.d.ts" />
/// <reference path="globals/node/index.d.ts" />
/// <reference path="globals/when/index.d.ts" />

… and add it to main.d.ts. Once it is done, the gulp builder will understand where amqplib typescript defiinition is located and you will get no error messages from build task.

3 Likes

Hi Antonio!

Did you apply these changes

or did it work without them?

@Daixtrose No, I did not make any modification to tsconfig/exclude