Typescript: Auto import in angular typescript is not working

Created on 29 Nov 2018  路  19Comments  路  Source: microsoft/TypeScript

  • VSCode Version:
    Version 1.29.1
    Typescript 3.1.4

  • OS Version:
    macOS 10.14.1

Steps to Reproduce:

  1. Create new angular app:
    ng new app

  2. Add new library:
    yarn add @datorama/akita

  3. Create session.model.ts:

export interface Session {
  id: ID;
  firstName: string;
  lastName: string;
  token: string;
}

Auto import is not working. I get this error:

[ts] Cannot find name 'ID'. [2304]
any

Starting VSCode with code --disable-extensions didn't help :(

TSServer Working as Intended

Most helpful comment

The same problem occurs even when I try to import some Angular modules. For instance, if I want to autoimport OverlayModule from @angular/cdk, autoimport is not giving any suggestions either :(.

All 19 comments

Does this reproduce in the latest VS Code insiders build with all extensions disabled?

This happens with latest build both on macOS and Windows 10. A latest few builds, the autocomplete feels incosistent and partially working.

I tried restarting the app, but no good.

I haven't tried this insiders build. I am using the official final build.

Try on insiders

I've just tried insiders version on Windows 10. The problem is still there. Auto import is not picking up the definition inside installed @datorama/akita package:

Cannot find name 'ID'.ts(2304)

It gets even weirder with rxjs package. Definitions from rxjs are offered for auto import, but the ones inside rxjs/operators like mapTocannot be found.

The conclusion is that this auto import logic is obviously broken.

I confirmed this by using TS 3.3.0-dev20181130.

The index.d.ts from akita has export * from './api/types'; which has an ID type. I see this error after trying to open the api/types file directly:

Err 403   [11:12:21.819] Exception on executing command {"seq":65,"type":"request","command":"getApplicableRefactors","arguments":{"file":"/Users/matb/projects/san/node_modules/@datorama/akita/src/api/types.d.ts","startLine":1,"startOffset":1,"endLine":1,"endOffset":1}}:

    Could not find file: '/Users/matb/projects/san/node_modules/@datorama/akita/src/api/types.d.ts'.

    Error: Could not find file: '/Users/matb/projects/san/node_modules/@datorama/akita/src/api/types.d.ts'.
        at getValidSourceFile (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:117240:23)
        at Object.getApplicableRefactors (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:118017:24)
        at IOSession.Session.getApplicableRefactors (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:125638:53)
        at Session.handlers.ts.createMapFromTemplate._a.(anonymous function) (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:124512:61)
        at /Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:125857:88
        at IOSession.Session.executeWithRequestId (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:125848:28)
        at IOSession.Session.executeCommand (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:125857:33)
        at IOSession.Session.onMessage (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:125879:35)
        at Interface.<anonymous> (/Users/matb/projects/san/node_modules/typescript/lib/tsserver.js:127139:27)
        at emitOne (events.js:116:13)
        at Interface.emit (events.js:211:7)
        at Interface._onLine (readline.js:282:10)
        at Interface._normalWrite (readline.js:424:12)
        at Socket.ondata (readline.js:141:10)
        at emitOne (events.js:116:13)
        at Socket.emit (events.js:211:7)
        at addChunk (_stream_readable.js:263:12)
        at readableAddChunk (_stream_readable.js:250:11)
        at Socket.Readable.push (_stream_readable.js:208:10)
        at Pipe.onread (net.js:594:20)

@mjbvz I don't get that exception. Note that when I create app and add that library it is not included in the project (because its not referenced from anywhere and hence completion wont show up for it as we only look for symbols in files included in the program). Opening the types.d.ts doesn't throw any expression. If I add import a from "@datorama/akita" to my test file, then it correctly shows ID in the completion list doing auto import if selected.

@mjbvz I am seeing the exceptions with that call stack when there is ordering mismatch in sending the requests from code-insiders. I was looking into #28389 this and I noticed that exception and log is:

Info 100  [14:57:17.992] request:
    {"seq":15,"type":"request","command":"close","arguments":{"file":"c:/temp/o2sql/lib/ast-translator.js"}}
Info 115  [14:57:17.992] request:
    {"seq":16,"type":"request","command":"getApplicableRefactors","arguments":{"file":"c:/temp/o2sql/lib/ast-translator.js","startLine":16,"startOffset":32,"endLine":16,"endOffset":32}}

And the log from vscode output window shows:

[Trace  - 2:56:34 PM] Sending request: close (15). Response expected: no. Current queue length: 1
Arguments: {
    "file": "c:/temp/o2sql/lib/ast-translator.js"
}
[Trace  - 2:56:34 PM] Sending request: getApplicableRefactors (16). Response expected: yes. Current queue length: 0
Arguments: {
    "file": "c:/temp/o2sql/lib/ast-translator.js",
    "startLine": 16,
    "startOffset": 32,
    "endLine": 16,
    "endOffset": 32
}
[Trace  - 2:56:34 PM] TypeScript Server: trying to cancel ongoing request with sequence number 16

@sheetalkamat I can't repo the exception anymore on latest @next.

I still don't get quick fix though in a simple ts file though because @datorama/akita can't be resolved:

import a from '@datorama/akita'

ID;

tsserver.log

And shouldn't imports quick fixes pick up theID type from the module even without import?

@mjbvz the index.ts opened in inferred project and doesn't include @datorama/akita in its typings. I am not sure what configuration you are using but it seems like there is no tsconfig or jsconfig file.

Info 17   [14:2:53.142] For info: /Users/matb/projects/san/index.ts :: No config files found.

Info 32   [14:2:54.377]     Files (21)
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es5.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2016.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.dom.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.dom.iterable.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.webworker.importscripts.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.scripthost.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.core.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.collection.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.generator.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.iterable.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.promise.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.proxy.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.reflect.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.symbol.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2016.array.include.d.ts
    /Users/matb/projects/san/node_modules/typescript/lib/lib.es2016.full.d.ts
    /Users/matb/projects/san/index.ts
    /Users/matb/projects/san/node_modules/@types/node/inspector.d.ts
    /Users/matb/projects/san/node_modules/@types/node/index.d.ts

Even once the import is resolved though, the quick fix still doesn't work for ID

Even once the import is resolved though, the quick fix still doesn't work for ID

The ID is type and not value. So it will work for

import a from '@datorama/akita'

const x : ID;

Man, i should stop trying to repo this bug; yes that was the issue.

Going back to the original repo steps:

  • Everything works for me on TS 3.2.1, provided you have a tsconfig (which ng should create)
  • Without a tsconfig, no quick fix. Most user are going to have a tsconfig but this seems like a bug to me

The same problem occurs even when I try to import some Angular modules. For instance, if I want to autoimport OverlayModule from @angular/cdk, autoimport is not giving any suggestions either :(.

@mjbvz and @sheetalkamat

I'm having the same issue for Angular Material.

import { NgModule } from '@angular/core';

const modules = [MatButtonModule, MatToolbarModule, MatSidenavModule];

@NgModule({
    declarations: [],
    imports: modules,
    exports: modules,
    providers: []
})
export class MaterialModule {}

The suggestion for MatSidenavModule and the other 2 modules never show up, no light bulb either.

VS Code: 1.29.1 (system setup)
Typescript 3.1.6
Windows 10

This is still not working, even with the latest VSCode version :(

@RyanCavanaugh @DanielRosenwasser This shouldn't be a bug but working as intended? WIthout the files being included in the project how can we know the symbol 'ID' is from @datorama/akita to offer it?

Let me know if we need to take any other action here. Thanks

Is it possible to force tsserver to lookup all files up-front?

If i'm using a lot of dependencies, or a large project with many dependencies, i would prefer to have tsserver scan all files up-front, so i don't have to find where every symbol is defined every time.

As a user, i could choose between

  • performance (i know where symbols are, i am going to do a few imports only)
  • completeness (i can accept an initial performance tradeoff to get more pertinent results)

I can see how doing this by default would make the process slower, so could this be an opt-in setting that forces tsserver to parse all files up-front eagerly? (user be warned: 'it will be slow', or something among those lines)

Thank you

Was this page helpful?
0 / 5 - 0 ratings

Related issues

xealot picture xealot  路  150Comments

disshishkov picture disshishkov  路  224Comments

jonathandturner picture jonathandturner  路  147Comments

blakeembrey picture blakeembrey  路  171Comments

Gaelan picture Gaelan  路  231Comments