Angular 18 - angular material auto import in vscode not working

[maayanzrihann]

Current Behavior

Auto suggest imports for angular material such as MatTab , MatCheckBox module .. not working in vscode

Using "@nx/angular": "19.4.1" with "@angular/material": "~18.1.0" in angular monorepo.

The import itself works as expected i imported manually like here:

Expected Behavior

vscode should auto suggests all node_modules libs including all of @angular/material/*

GitHub Repo

No response

Steps to Reproduce

tsconfig.base.json :

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2020", "dom"],
    "skipLibCheck": true,
    "types": ["node_module", "jest"],
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {}
  },
  "exclude": ["node_modules", "tmp"]
}

.settings.json for vscode:

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.suggest.enabled": true,
  "typescript.suggest.paths": true,
  "typescript.suggest.autoImports": true,
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
  "prettier.printWidth": 100,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always",
    "source.fixAll.stylelint": "always"
  },
  "eslint.validate": ["javascript", "typescript", "html"],
  "eslint.workingDirectories": ["apps/myapp"],
  "scss.validate": false,
  "stylelint.validate": ["scss"],
  "angular.enable-strict-mode-prompt": false,

}

package json:

{
  "name": "@test/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~18.0.0",
    "@angular/cdk": "~18.1.0",
    "@angular/common": "~18.0.0",
    "@angular/compiler": "~18.0.0",
    "@angular/core": "~18.0.0",
    "@angular/forms": "~18.0.0",
    "@angular/material": "~18.1.0",
    "@angular/platform-browser": "~18.0.0",
    "@angular/platform-browser-dynamic": "~18.0.0",
    "@angular/router": "~18.0.0",
    "@auth0/auth0-spa-js": "^2.1.3",
    "@datadog/browser-logs": "^5.22.0",
    "@datadog/browser-rum": "^5.22.0",
    "@ngx-translate/core": "^15.0.0",
    "@nx/angular": "19.4.1",
    "@splitsoftware/splitio": "^10.27.0",
    "apollo-angular": "^7.0.2",
    "geolib": "^3.3.4",
    "graphql": "^16.9.0",
    "moment": "^2.30.1",
    "ngx-toastr": "^19.0.0",
    "ol": "^9.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~18.0.0",
    "@angular-devkit/core": "~18.0.0",
    "@angular-devkit/schematics": "~18.0.0",
    "@angular-eslint/eslint-plugin": "^18.0.1",
    "@angular-eslint/eslint-plugin-template": "^18.0.1",
    "@angular-eslint/template-parser": "^18.0.1",
    "@angular/cli": "~18.0.0",
    "@angular/compiler-cli": "~18.0.0",
    "@angular/language-service": "~18.0.0",
    "@angular/material": "^18.1.0",
    "@graphql-codegen/cli": "^5.0.2",
    "@graphql-codegen/typescript": "^4.0.9",
    "@graphql-codegen/typescript-apollo-angular": "^4.0.0",
    "@graphql-codegen/typescript-operations": "^4.2.3",
    "@nx/devkit": "19.4.1",
    "@nx/eslint": "19.4.1",
    "@nx/eslint-plugin": "19.4.1",
    "@nx/jest": "19.4.1",
    "@nx/js": "19.4.1",
    "@nx/playwright": "19.4.1",
    "@nx/storybook": "^19.4.1",
    "@nx/web": "19.4.1",
    "@nx/workspace": "19.4.1",
    "@playwright/test": "^1.36.0",
    "@schematics/angular": "~18.0.0",
    "@storybook/addon-essentials": "7.6.20",
    "@storybook/addon-interactions": "^7.5.3",
    "@storybook/angular": "7.6.20",
    "@storybook/core-server": "7.6.20",
    "@storybook/jest": "^0.2.3",
    "@storybook/test-runner": "^0.13.0",
    "@storybook/testing-library": "^0.2.2",
    "@swc-node/register": "~1.9.1",
    "@swc/core": "~1.5.7",
    "@swc/helpers": "~0.5.11",
    "@types/jest": "^29.4.0",
    "@types/node": "^18.16.9",
    "@typescript-eslint/eslint-plugin": "^7.3.0",
    "@typescript-eslint/parser": "^7.3.0",
    "@typescript-eslint/utils": "^8.0.0-alpha.28",
    "axios": "^1.7.2",
    "eslint": "~8.57.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-playwright": "^0.15.3",
    "gql-generator": "^2.0.0",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-preset-angular": "~14.1.0",
    "ngx-electron": "^2.2.0",
    "nx": "19.4.1",
    "prettier": "^2.6.2",
    "storybook": "^7.5.3",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.4.2"
  }
}

Nx Report

nx (global)        : 19.4.3
nx                 : 19.4.1
@nx/js             : 19.4.1
@nx/jest           : 19.4.1
@nx/linter         : 19.4.1
@nx/eslint         : 19.4.1
@nx/workspace      : 19.4.1
@nx/angular        : 19.4.1
@nx/cypress        : 19.4.1
@nx/devkit         : 19.4.1
@nx/eslint-plugin  : 19.4.1
@nx/playwright     : 19.4.1
@nx/storybook      : 19.4.1
@nrwl/tao          : 19.4.1
@nx/web            : 19.4.1
@nx/webpack        : 19.4.1
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/playwright/plugin
@nx/eslint/plugin
@nx/storybook/plugin
---------------------------------------
Community plugins:
@storybook/angular : 7.6.20
apollo-angular     : 7.0.2
ngx-toastr         : 19.0.0

Failure Logs

No response

Package Manager Version

10.7.0

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

• In webStorm all import works as expected
• In angular 18 project generated by angular cli (not with nx) import also works

[Coly010]

Hi!

Can you please provide a minimal reproduction repo so that I can investigate this further?

[IliaPodolko]

I think material breaks all import suggestions from node_modules in VSCode

Use repo https://github.com/IliaPodolko/vscode-imports
or use steps to reproduce

1. Create new angular app
   ng new my-angular-project
2. Go to app.component.ts and try add FormsModule, you will see suggestions
3. Install material
   npm install @angular/material
4. Go to app.component.ts and try add FormsModule, you will NOT see suggestions

angular cli v18.1.3
node v18.20.2

Visual Studio Code Details below
Version: 1.91.1 (user setup)
Commit: f1e16e1e6214d7c44d078b1f0607b2388f29d729
Date: 2024-07-09T22:06:49.809Z (3 wks ago)
Electron: 29.4.0
ElectronBuildId: 9728852
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Windows_NT x64 10.0.19045

[IliaPodolko]

Created ticket here angular/components#29537

[github-actions]

This issue has been automatically marked as stale because no reproduction was provided within 7 days.
Please help us help you. Providing a repository exhibiting the issue helps us diagnose and fix the issue.
Any time that we spend reproducing this issue is time taken away from addressing this issue and other issues.
This issue will be closed in 21 days if a reproduction is not provided.
If a reproduction has been provided, please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[Coly010]

Closing as a solution was found in angular/components#29537