@angular/material no import suggestions

[christopher-kiss]

Expected behavior:
When typing in angular material imports, I should receive auto import suggestions and a light bulb.

Actual behavior:
Not receiving any import suggestions or light bulb.

Steps to reproduce:
Start a new angular project
ng new mat-test --style=scss --routing

Add angular material
ng add @angular/material

Y to hammerjs
Y to animations

Open app.module.ts

In the imports array, start typing MatButtonModule, notice there is no suggestions.

If I add the import correctly import { MatButtonModule } from '@angular/material/button'; which in the similiar issue below suggested would fix this, it actually does not.

I start typing MatSidenavModule in the imports array and it again fails to pick up this import.

Related Issues:
#28773

There are two comments of interest in this issue, one mentions adding an import from the module will resolve this as ts will then start searching there. This does no work, as demonstrated above by adding a module from button, the other modules do not work.

The other comment mentions that this works correctly in TS 3.2.1. I fail to see how this works correctly, or maybe the solution to this has not been explained?

I've tested this in Typescript 3.3.0-dev, 3.2.2 and 3.1.6, same behaviour in all 3.
Using VS Code 1.30.0

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.3
Node: 10.14.1
OS: win32 x64
Angular: 7.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.3
@angular-devkit/build-angular     0.11.3
@angular-devkit/build-optimizer   0.11.3
@angular-devkit/build-webpack     0.11.3
@angular-devkit/core              7.1.3
@angular-devkit/schematics        7.1.3
@angular/cdk                      7.1.1
@angular/material                 7.1.1
@ngtools/webpack                  7.1.3
@schematics/angular               7.1.3
@schematics/update                0.11.3
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

[christopher-kiss]

Upon further investigation, if I don't scope the module down as far import { MatButtonModule, MatSidenavModule, MatToolbarModule } from '@angular/material';. This will now pickup all imports from the module.

Which makes sense and aligns with the comment in the related issue. I guess not having the suggestions show up the first time threw me off.

[gentunian]

This should be reopened. Those were workarounds for the real problem. Angular material now has a different way to load modules. You can't import MatButtonModule from @angular/material. You have to import it from @angular/material/button. Now, everything relative to the button path can be "auto imported" but the scope is only for button. It's still a workaround.

Modules should be suggested for @angular/material.

[gentunian]

Ok. Finally, after writing the problem down and reading my comment above, I've realized that there's this option: typescript.preferences.importModuleSpecifier with values: [auto, relative, non-relative].

After setting this to non-relative it started working.

[static-voiddd]

This didn't work for me even if have non-relative setting.

[rutpshah]

For Angular 13, below solution worked for me:
Add this in tsconfig.json under compilerOptions.

"typeRoots": ["node_modules/@angular/material"]

[erwindelta]

For Angular 13, below solution worked for me: Add this in tsconfig.json under compilerOptions.

"typeRoots": ["node_modules/@angular/material"]

hi, this work for me but i got an error like this

Cannot find type definition file for 'esm2020'. The file is in the program because: Entry point for implicit type library 'esm2020'

how can i fix this ?

[ChaitanyaAgile]

@erwindelta same here, anyone got how to solve this ?

[mratanusarkar]

I am using Angular 15, ES2022
and I am having the same issue.

here is the error that I got:

Cannot find type definition file for 'esm2020'.
  The file is in the program because:
    Entry point for implicit type library 'esm2020'ts

Any fixes?

[Fasteroid]

This plus non-relative solved my issue, thanks bro!

For Angular 13, below solution worked for me: Add this in tsconfig.json under compilerOptions.

"typeRoots": ["node_modules/@angular/material"]

[drumfloo]

A colleague of mine got the solution for me. In my case with VS-Code and Angular 15 for the same issue @mratanusarkar had.

Without the "typeRoots": ["node_modules/@angular/material"] in the tsconfig.json, i just imported a Angular-Materials-Module manually in app-module.ts. Don´t forget to import it, compile and close VS-Code (all instances, because of global cache). Open the project again an i was able to import every Material-Modul with suggestions.

Worked for me, thanks to @i3ene