Typescript - add missing import

[mjbvz]

From @ddyrcz on March 15, 2017 7:7

• VSCode Version: 1.10.2
• OS Version: Win 10

Steps to Reproduce:

1. Fetch some package from the npm (in my case it was angular2-moment)
2. Go to the app.module file
3. Add to the imports array the new module to import (in my case it was MomentModule)
4. Try to add missing import - CTRL + .
5. No missing import is added

Copied from original issue: microsoft/vscode#22648

[mjbvz]

@ddyrcz Can you please provide some example code?

Also, is the file you are working with named app.module with no .js or .ts extension? The TypeScript server we use to power our JS and TS intellisense only supports imports/modules for files that have one the these extensions: .js, .jsx, .ts, .tsx. You may want to try adding the supported file extensions if this is the case

[mjbvz]

From @ddyrcz on March 16, 2017 9:20

Sory I forgot the extension. Of course I meant app.module.ts

I've create an sample git repository (it's just a new project generated with angular-cli 1.0.0-rc.1):
https://github.com/ddyrcz/vscode-typescript-issue

You can clone this and try to reproduce.

Steps:

1. clone repository from the https://github.com/ddyrcz/vscode-typescript-issue.git
2. install dependencies
3. install angular2-moment (npm i angular2-moment)
4. go to app.module.ts
5. add MomentModule in the imports array

6. try to add missing import

In my case no missing import is adding

[mjbvz]

I took a look at this on the VSCode side using the [email protected]. We do request the code fix for this error but get no response back:

[Trace - 3:47:52 PM] Sending request: getCodeFixes (23). Response expected: yes. Current queue length: 0
Arguments: {
    "file": "/Users/matb/projects/vscode-typescript-issue/src/app/app.module.ts",
    "startLine": 19,
    "endLine": 19,
    "startOffset": 3,
    "endOffset": 15,
    "errorCodes": [
        2345
    ]
}
[Trace - 3:47:52 PM] Response received: getCodeFixes (23). Request took 2 ms. Success: true 
Result: []

Manually adding import { MomentModule } from 'angular2-moment'; resolves the issue. It is not clear to me why a code fix is not returned in this case

[Meligy]

I suspect the import fix feature (if that's a good name for it) doesn't work well with package index files.

Not sure if this is the same issue or not, but for example, if I use @Component(), and I need the import for it, VS Code Insiders suggests all places where it can exist expect the package index file.

See:

The conventional place which should have been in this list also is @angular/core (not @angular/core/core, only single core mention).

It would only know that @angular/core is the right place if I have other imports from it.

That seems very suspiciously similar to this issue. Not 100% sure if it's the same issue or should be created separately.

[minestarks]

@Meligy I believe that's a distinct issue, see #15223

The root cause of this one, on the other hand, seems to be that the Add Missing Import codefix doesn't go searching in your node_modules for a module you haven't referenced at all before. It'll only suggest modules that are either a file in your project or previously imported by another file in your project.

This is currently by design because we're not confident it will scale well, the way code fixes are currently implemented. If we can come up with an efficient design (perhaps have an explicitly user initiated step to look for more modules) we could consider fixing it.

[Meligy]

The root cause of this one, on the other hand, seems to be that the Add Missing Import codefix doesn't go searching in your node_modules for a module you haven't referenced at all before. It'll only suggest modules that are either a file in your project or previously imported by another file in your project.

I'm failing to make sense of this because somehow it's looking for these paths:

I have not imported from these. In this example I'd either have other imports from @angular/core in other files in the project, or have no other imports at all (hypothetically), which if explains why it's not showing @angular/core, doesn't explain why it's suggesting all the other files, which only exist in node_modules.