Angular 10: VSCode show error when import with absolute path

Question

after Angular 10 upgrade from Angular 9. VSCode show error when import with absolute path:

import { IconModule } from 'src/app/shared/components/icon/icon.module';

the error:

Cannot find module 'src/app/shared/components/icon/icon.module'.ts(2307)

if i change with a relative path it works. The same path works if downgrade to Angular 9.

My tsconfig setting:

./tsconfig.json

{
  "files": [],
  "references": [
    {
      "path": "./src/tsconfig.app.json"
    },
    {
      "path": "./src/tsconfig.spec.json"
    },
    {
      "path": "./e2e/tsconfig.e2e.json"
    }
  ]
}

./src/tsconfig.app.json

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []
  },
  "files": [
    "main.ts",
    "polyfills.ts"
  ]
}

./tsconfig.base.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "target": "es2015",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "strictInjectionParameters": true
  },
}

Answer 1

Update VSCode to the latest version (1.46.1) has fixed the issue.

Answer 2

Seems, the problem happens because of your tsconfig files location. It located in src folder already, and "baseUrl": "./" linked to that folder. So in your absolute path no need to write src folder. Just start from app . Like 'app/shared/components/icon/icon.module' .

Or move your tsconfig files up to root.

Answer 3

It might be an issue caused because of opening a sub-folder in VSCode where import consists of absolute paths and those absolute paths starts from a parent folder of your currently opened folder.

Fix: Open your project's root directory in VSCode