Angular 18 - angular material auto import in vscode not working

maayanzrihann commented 1 month ago

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

[X] 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 commented 1 month ago

Hi!

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

IliaPodolko commented 1 month ago

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 commented 1 month ago

Created ticket here https://github.com/angular/components/issues/29537

github-actions[bot] commented 4 weeks ago

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 commented 3 weeks ago

Closing as a solution was found in https://github.com/angular/components/issues/29537

nrwl / nx