Skip to content
This repository has been archived by the owner on Dec 1, 2019. It is now read-only.

Loader does not use @types definitions #244

Open
vidartf opened this issue Sep 28, 2016 · 15 comments
Open

Loader does not use @types definitions #244

vidartf opened this issue Sep 28, 2016 · 15 comments

Comments

@vidartf
Copy link

vidartf commented Sep 28, 2016

With Typescript 2.0 you shouldn't have to declare all your typings explicitly, but you can simply ensure that npm installs type packages into the scoped package @types (see microsoft/TypeScript#9184).

Currently it doesn't seem like ATL respects this, as it fails with missing typings where tsc works. Examples of such scoped packages are @types/requirejs, @types/mocha, @types/jquery etc.

@vidartf
Copy link
Author

vidartf commented Sep 29, 2016

A workaround is to add ///<reference types="expect.js"> etc. to typings.d.ts while using @types/....

@red-0ne
Copy link

red-0ne commented Oct 1, 2016

Adding a types entry in compilerOptions should solve the problem

  "compilerOptions": {
    "types": ["requirejs", "mocha", "jquery"],
    ...
  }

@vidartf
Copy link
Author

vidartf commented Oct 2, 2016

Sure, that is an alternative solution instead of the <reference> tags in typings, but that is still not needed for direct tsc compilation. However, as this is still not very well documented, I'm okay with this being a "tracking" issue until such documentation is in place.

@red-0ne
Copy link

red-0ne commented Oct 2, 2016

It also uses @types/* packages and is an official typescript option (see https://www.typescriptlang.org/docs/handbook/compiler-options.html --types). Yes tsc don't need it but both awesome-typescript-loader and ts-loader can't handle @types/* without it. So they should definitely provide a fix or some documentation.

@WuTheFWasThat
Copy link

WuTheFWasThat commented Oct 13, 2016

i ran into the same issue, and strangely, adding "types": [] fixed it for me

@IRus
Copy link

IRus commented Oct 13, 2016

@WuTheFWasThat According documentation it shouldn't work in this case:

Specify "types": [] to disable automatic inclusion of @types packages.

@vidartf
Copy link
Author

vidartf commented Oct 13, 2016

Relevant handbook section: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible; specifically, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.

@WuTheFWasThat
Copy link

WuTheFWasThat commented Oct 13, 2016

@IRus but it did work ¯_(ツ)_/¯

Also, from the docs you reference

Specify "types": [] to disable automatic inclusion of @types packages.

Keep in mind that automatic inclusion is only important if you’re using files with global declarations (as opposed to files declared as modules). If you use an import "foo" statement, for instance, TypeScript may still look through node_modules & node_modules/@types folders to find the foo package.

I think perhaps we're not discussing the same situation, but it sounds like this is why it works for me. All my @types packages are in node_modules/@types and are module declarations.

Hopefully my comment could be helpful for others in a similar boat, since it was the only way I could figure out to get things working. At any rate, it's unfortunate that tsc would work but not awesome-typescript-loader!

@vidartf
Copy link
Author

vidartf commented Oct 14, 2016

@WuTheFWasThat If you specify "types": [], does tsc build still work?

@WuTheFWasThat
Copy link

yes - tsc works with "types": [] and "types" unspecified. awesome-typescript-loader works only with "types": []

@WuTheFWasThat
Copy link

actually, please disregard my messages. I was mistaken about "types": [] fixing things... don't ask why, it's a little weird and mostly stupid on my part!

@jack-guy
Copy link

jack-guy commented Oct 16, 2016

So is it just awesome-typescript-loader that's broken, or is ts-loader having problems too? All I want to do is include @types/tinycolor, but I'm really having trouble getting this loader to cooperate. VS Code picks up the module just fine.

After a lot of head-banging this seems to be a probably with the typescript definition for tinycolor not matching the npm module name. Carry on.

@vidartf
Copy link
Author

vidartf commented Nov 16, 2016

ts-loader seem to have this part well solved (finding type declarations), although ATL has solved other issues better. This is why I'm really glad they are attempting to cooperate more 👍

@rcollette
Copy link

rcollette commented Jan 25, 2017

I'm really stuck with this issue. While the workaround seems to be to specify an empty types array in tsconfig.json, this causes other compilation issues for me in particular for my unit tests where mocha,sinon,chai functions are globals.

I've got it almost working but I just can't seem to get it to pull in the type information for angular when there is an import statement for angular, like:
import * as angular from '@types/angular';
The import statement is required otherwise I get the message TS2686 about there being a global being referenced from a UMD without using an import. (which is being discussed here microsoft/TypeScript#10178)

I've also tried specifically adding the @types path to the tsconfig and that does not help either.

    "typeRoots": [
      "../../../node_modules/@types"
    ],

The following shows my tsconfig.json, webpack config and output from both tsc and webpack. tsc works just fine, I get an output bundle from webpack, but the checker reports errors. In the listing below ignore the tsc errors. They are involved in the generation of the declarations folder specified in the tsconfig and are unrelated to the atl errors.

Rich-Collette:saas-shipping-ui richardcollette$ cat app/modules/mailing/tsconfig.json
{
  "version": "2.1.5",
  "compilerOptions": {
    "target": "es5",
    "isolatedModules": false,
    "declaration": false,
    "noImplicitAny": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "sourceMap": true,
    "noEmit": true,
    "moduleResolution": "node",
    "types": [
      "angular",
      "mocha",
      "sinon",
      "chai",
      "sinon-chai",
      "oclazyload",
      "ui-select"
    ]
  },
  "include": [
    "stamps/**/*.ts",
    "../../../declarations/**/*.d.ts"
  ],
  "compileOnSave": false,
  "aComment":"There is currently a bug in awesome-typescript-loader where it does not do auto module (type) resolution hence we have to specify the global types to include using the types configuration."
}


Rich-Collette:saas-shipping-ui richardcollette$ tsc -p app/modules/mailing/tsconfig.json --diagnostics
Files:           583
Lines:         44107
Nodes:        177892
Identifiers:   59523
Symbols:       50724
Types:         12897
Memory used: 110175K
I/O read:      0.02s
I/O write:     0.00s
Parse time:    0.60s
Bind time:     0.31s
Check time:    0.98s
Emit time:     0.00s
Total time:    1.89s


Rich-Collette:saas-shipping-ui richardcollette$ gulp mailing:build
error TS5024: Compiler option 'declarationDir' requires a value of type string.
error TS5024: Compiler option 'outDir' requires a value of type string.
[00:48:52] Using gulpfile /Volumes/saas-shipping/saas-shipping-ui/gulpfile.js
[00:48:52] Starting 'mailing:build'...
[00:48:52] Starting 'mailing:clean'...
[00:48:52] Finished 'mailing:clean' after 10 ms
[00:48:52] Starting 'mailing:templates'...
[00:48:52] Finished 'mailing:templates' after 111 ms
[00:48:52] Starting 'mailing:_tscapp'...
[00:49:00] Finished 'mailing:_tscapp' after 8.44 s
[00:49:00] Starting 'mailing:webpack'...


[at-loader] Using [email protected] from typescript and "tsconfig.json" from /Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/tsconfig.json.


[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.328 sec.
[00:49:03] [mailing:webpack] Hash: 7fdcb99f60df70e733b7
Version: webpack 2.1.0-beta.27
Time: 2743ms
                                            Asset    Size  Chunks             Chunk Names
    ./app/modules/mailing/stamps/stamps.bundle.js  315 kB       0  [emitted]  stamps
./app/modules/mailing/stamps/stamps.bundle.js.map  422 kB       0  [emitted]  stamps
chunk    {0} ./app/modules/mailing/stamps/stamps.bundle.js, ./app/modules/mailing/stamps/stamps.bundle.js.map (stamps) 309 kB [entry] [rendered]
    [0] ./app/modules/mailing/stamps/app.mailing.stamps.module.ts 509 bytes {0} [built]
    [1] ./app/modules/mailing/stamps/stamps.base.controller.ts 22.8 kB {0} [built]
    [2] ./app/modules/mailing/stamps/modals/addAddress.modal.controller.ts 8.22 kB {0} [built]
    [3] ./app/modules/mailing/stamps/preferences/preferences.mailing.module.ts 266 bytes {0} [built]
    [4] ./app/modules/mailing/stamps/stamps.dataaccess.service.ts 23.8 kB {0} [built]
    [5] ./app/modules/mailing/stamps/modals/addExistingQRCode.modal.controller.ts 4.19 kB {0} [built]
    [6] ./app/modules/mailing/stamps/modals/addExtraServices.modal.controller.ts 7.68 kB {0} [built]
    [7] ./app/modules/mailing/stamps/modals/addNewQRCode.modal.controller.ts 3.38 kB {0} [built]
    [8] ./app/modules/mailing/stamps/modals/chooseAnotherMailClass.modal.controller.ts 14.1 kB {0} [built]
    [9] ./app/modules/mailing/stamps/modals/markCellsAsDamaged.modal.controller.ts 2.94 kB {0} [built]
   [10] ./app/modules/mailing/stamps/modals/printerSettings.modal.controller.ts 4.21 kB {0} [built]
   [11] ./app/modules/mailing/stamps/modals/printing.modal.controller.ts 535 bytes {0} [built]
   [12] ./app/modules/mailing/stamps/modals/refund.modal.controller.ts 1.03 kB {0} [built]
   [13] ./app/modules/mailing/stamps/modals/reprint.modal.controller.ts 1.43 kB {0} [built]
   [14] ./app/modules/mailing/stamps/modals/selectPrinter.modal.controller.ts 5.1 kB {0} [built]
   [15] ./app/modules/mailing/stamps/modals/stampsRecovery.modal.controller.ts 3.22 kB {0} [built]
   [16] ./app/modules/mailing/stamps/modals/typeInYourOwnStampValue.modal.controller.ts 1.43 kB {0} [built]
   [17] ./app/modules/mailing/stamps/modals/verifyAddress.modal.controller.ts 4.34 kB {0} [built]
   [18] ./app/modules/mailing/stamps/stamps.templates.js 102 kB {0} [built]
   [19] ./app/modules/mailing/stamps/convertToNumber.directive.ts 1.14 kB {0} [built]
   [20] ./app/modules/mailing/stamps/preferences/preferences.mailing.controller.ts 7.6 kB {0} [built]
   [21] ./app/modules/mailing/stamps/preferences/preferences.mailing.dataaccess.service.ts 2.65 kB {0} [built]
   [22] ./app/modules/mailing/stamps/stampMailClassDisplay.directive.ts 3.69 kB {0} [built]
   [23] ./app/modules/mailing/stamps/stampValueDisplay.filter.ts 790 bytes {0} [built]
   [24] ./app/modules/mailing/stamps/stamps.envelope.controller.ts 21.3 kB {0} [built]
   [25] ./app/modules/mailing/stamps/stamps.print.service.ts 31.9 kB {0} [built]
   [26] ./app/modules/mailing/stamps/stamps.roll.controller.ts 6.11 kB {0} [built]
   [27] ./app/modules/mailing/stamps/stamps.sheet.controller.ts 14.5 kB {0} [built]
   [28] ./app/modules/mailing/stamps/stamps.verifyAddress.service.ts 7.93 kB {0} [built]
   [29] multi stamps 364 bytes {0} [built]

ERROR in ./app/modules/mailing/stamps/app.mailing.stamps.module.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps'
 @ ./app/modules/mailing/stamps/app.mailing.stamps.module.ts 3:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/stamps.base.controller.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps'
 @ ./app/modules/mailing/stamps/stamps.base.controller.ts 2:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/stamps.dataaccess.service.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps'
 @ ./app/modules/mailing/stamps/stamps.dataaccess.service.ts 3:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/stamps.envelope.controller.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps'
 @ ./app/modules/mailing/stamps/stamps.envelope.controller.ts 7:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/stamps.print.service.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps'
 @ ./app/modules/mailing/stamps/stamps.print.service.ts 2:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/stamps.verifyAddress.service.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps'
 @ ./app/modules/mailing/stamps/stamps.verifyAddress.service.ts 2:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/stamps.sheet.controller.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps'
 @ ./app/modules/mailing/stamps/stamps.sheet.controller.ts 8:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/modals/addAddress.modal.controller.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps/modals'
 @ ./app/modules/mailing/stamps/modals/addAddress.modal.controller.ts 2:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/modals/chooseAnotherMailClass.modal.controller.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps/modals'
 @ ./app/modules/mailing/stamps/modals/chooseAnotherMailClass.modal.controller.ts 2:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/modals/markCellsAsDamaged.modal.controller.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps/modals'
 @ ./app/modules/mailing/stamps/modals/markCellsAsDamaged.modal.controller.ts 2:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/modals/printerSettings.modal.controller.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps/modals'
 @ ./app/modules/mailing/stamps/modals/printerSettings.modal.controller.ts 2:14-39
 @ multi stamps

ERROR in ./app/modules/mailing/stamps/preferences/preferences.mailing.module.ts
Module not found: Error: Can't resolve '@types/angular' in '/Volumes/saas-shipping/saas-shipping-ui/app/modules/mailing/stamps/preferences'
 @ ./app/modules/mailing/stamps/preferences/preferences.mailing.module.ts 2:14-39
 @ multi stamps
[00:49:03] Finished 'mailing:webpack' after 2.84 s
[00:49:03] Finished 'mailing:build' after 11 s
Rich-Collette:saas-shipping-ui richardcollette$ 

@aluanhaddad
Copy link

aluanhaddad commented Apr 2, 2017

@rcollette

I've got it almost working but I just can't seem to get it to pull in the type information for angular when there is an import statement for angular, like:
import * as angular from '@types/angular';
The import statement is required otherwise I get the message TS2686 about there being a global being referenced from a UMD without using an import. (which is being discussed here microsoft/TypeScript#10178)

Any occurence of @types in a module specifier such as

import * as angular from '@types/angular';

is a bug and will cause a runtime error if angular is used in a value position such as in

angular.module('app', []);

in the importing module.

@types packages are stored in the @types directory but they must never be manually imported. Rather, you need to import the dependency they correspond to from where that dependency is installed. @types packages provide the type declarations for dependencies that do not otherwise provide them.

This means that if you

$ npm install angular
$ npm install @types/angular

then your code needs to always use 'angular' as the module specifier. When the compiler sees import module from 'specifier' it checks if 'specifier' has declarations that reside alongside it (for example 'moment' maintains and ships its own declarations) if it does not it will automatically check in node_modules/@types/specifier. The declarations physically installed in that directory are then automatically overlaid onto uses of import module from 'specifier' for typechecking purposes.

For each of those errors, you must change '@types/angular' to angular.

More generally, never import anything from @types.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants