TypeScript compiler "cannot find module 'angular2/..."

Hi,

I have a basic angular 2 setup, now the TypeScript compiler keeps saying it can't the modules, although I have imported it in the external libraries and when I press "CTRL" the hand is showing up and I can click on the file to open it, so the IDE can find it.

 

This is my tsconfig.json setup, I have enabled this in the TypeScript dialog:

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"libs",
"angular2"
]
}

This is a screenshot of my window, to give a better idea of the problem I'm having.

Thanks in advance!

0
8 comments
Avatar
Permanently deleted user
Official comment

Hello!

It looks like TypeScript compiler can't find the d.ts files imported by your module - do you have them in your project? Are they linked to your .ts files with ///<reference path> comments? If you don't have such comments, and don't like adding them, using tsconfig.json is your choice: if referenced files are included in it, and tsconfig is used for compilation ('Use tsconfig.json' is enabled in Settings/Languages & Frameworks/TypeScript), compiler will use the configuration file when searching for references, and won't need d.ts files being referenced explicitly. See also http://stackoverflow.com/questions/32151141/webstormtypescript-how-to-use-without-reference-path.

Just in case, here's tsconfig.json example with added d.ts files: https://github.com/angular/ts-quickstart/blob/master/tsconfig.json.

Please also check http://stackoverflow.com/questions/30858164/cannot-find-external-module-angular2-angular2-angular2-w-typescript/32581715#32581715 - you may find it helpful.

 

Hi Vladimir,

When I used the example tsconfig.json, I get this error:

Warning:File was not compiled because there is no a reference from tsconfig.json

Now.. what frustrates me the most is that I don't have any clue how this tsconfig.json actually works, so I'm just reading stuff on the internet and trying out examples, but I have no idea what I'm doing actually or what I should be doing.

0

This error is expected - only those files that are explicitly listed in files[] are compiled, others are ignored.

See https://github.com/Microsoft/TypeScript/wiki/tsconfig.json):

If no "files" property is present in a tsconfig.json, the compiler defaults to including all TypeScript (*.ts or *.tsx) files in the containing directory and subdirectories. When a "files" property is present, only the specified files are included.

So, you have to either delete this property from your config, or explicitly specify all files to be included... Note also that files overrides exclude property - if the former exists, the latter is ignored.

 

As for your first issue... Seems that your tsconfig.json is located in <project root>/assets folder, and your .ts files are in <project root>/app, and thus aren't included in compilation? Plus, libs and angular2 folders are explicitly excluded there... And next - external libraries configured in Settings/Languages & Frameworks/JavaScript/Libraries are NOT available to typescript compiler, they are only used by the built-in parser for code completion/navigation/etc. You need to have all files involved in compilation right in your project, and make sure to either include them in your tsconfig.json or provide proper ///<reference path> comments

0

I solved the issue with the npm-link command, that way I can keep my "node_module" folder clean.  This isn't the perfect solution, because I link with global node modules, and I know I could also fix it with an package.json file.

Anyhow.. this problem should be solve itself in PhpStorm 11.

0

> this problem should be solve itself in PhpStorm 11.

 

Sorry, haven't got what you mean. Do you think that this is a bug in PHPStorm that has to be fixed? Or?

0

It's not really a bug... it's just that in the next version of PhpStorm the TypeScript compiler will just have more / better functionality to look up / connect to dependencies.

Now, if you don't have a local folder in your project with the dependencies, like "node_modules/angular2" the TypeScript compiler will keep throwing error that it can't find "angular2" even though if you add angular2 as an external library the IDE will be able to find the code, but the TypeScript compiler still can't and that will be solved in the next version of PhpStorm.

0

No, this isn't going to be implemented. Please see my previous post: "external libraries configured in Settings/Languages & Frameworks/JavaScript/Libraries are NOT available to typescript compiler, they are only used by the built-in parser for code completion/navigation/etc". And, BTW, you will also need to have angular2 modules installed locally to run your application (unless you link the corresponding global modules to your project via symlink, as you did)

0

Please sign in to leave a comment.