Angular 18 - angular material auto import in vscode not working

Question

Angular 18 - angular material auto import in vscode not working

maayanzrihann opened this issue 2 months ago · comments

maayan zrihan commented 2 months 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

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

Colum Ferry · Answer 1 · Wed Jul 24 2024 19:07:00 GMT+0800 (China Standard Time)

Hi!

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

Ilia Podolko · Answer 2 · Thu Aug 01 2024 02:29:51 GMT+0800 (China Standard Time)

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

Create new angular app
ng new my-angular-project
Go to app.component.ts and try add FormsModule, you will see suggestions
Install material
npm install @angular/material
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

Ilia Podolko · Answer 3 · Sat Aug 03 2024 06:28:56 GMT+0800 (China Standard Time)

Created ticket here angular/components#29537

github-actions · Answer 4 · Sat Aug 10 2024 08:23:55 GMT+0800 (China Standard Time)

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! 🙏

Colum Ferry · Answer 5 · Mon Aug 12 2024 17:10:18 GMT+0800 (China Standard Time)

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