VSCode/tsconfig paths issue - files get pulled in but I get "Cannot find module" in the editor

Question

I've been having this strange issue since I've started working on this project a while back. In my various Angular components/classes/etc. I'm pulling in other modules and files using import. For any of these that use the base path @ symbol, I'm getting an error in VSCode (note: @angular/core and other packages work... issue is just with the paths). What's weird is that I can compile and run the application with no issues... the imports all get pulled in successfully despite the warning.

I've just been ignoring this issue for a while, but it causes one issue that's very inconvenient... if I try to go to the definition of, for example, an object that's in one of the imported modules, VSC doesn't bring me to that file because it can't seem to find it.

Everyone on my team uses the exact same code base (and the same tsconfig file) in VSCode without experiencing this problem. So it doesn't seem to be an issue with the tsconfig file or codebase setup itself, but rather something up with my VSCode itself. I've scoured StackOverflow and elsewhere for solutions but haven't had any luck. Any suggestions would be much appreciated.

Import example (top of an Angular ts file):

import { SigningAction } from '@middlemass.signing/dto/signing-action';

Here's the warning I get when hovering over any import with a path shortcut prefix:

Cannot find module '@middlemass.signing/dto/signing-action' or its corresponding type declarations.

tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "suppressImplicitAnyIndexErrors": true,
      "target": "es5",
      "resolveJsonModule": true,
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true,
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2017",
        "dom"
      ],
      "module": "es2015",
      "baseUrl": "./",
      "paths": {
        "@middlemass.sending/*": [
          "projects/middlemass-sending/src/*"
        ],
        "@middlemass.sending/shared/*": [
          "projects/middlemass-sending/src/shared/*"
        ],
        "@middlemass.sending/utils/*": [
          "projects/middlemass-sending/src/shared/utils*"
        ],
        "@middlemass.sending/services/*": [
          "projects/middlemass-sending/src/services/*"
        ],
        "@middlemass.sending/dto/*": [
          "projects/middlemass-sending/src/dto/*"
        ],
        "@middlemass.sending/env/*": [
          "projects/middlemass-sending/src/environments/*"
        ],
        "@middlemass.sending/styles/*": [
          "projects/middlemass-sending/src/scss/*"
        ],
        "@middlemass.sending/locale/*": [
          "projects/middlemass-sending/locale/*"
        ],
        "@middlemass.signing/locale/*": [
          "projects/middlemass-signing/locale/*"
        ],
        "@middlemass.signing/dto/*": [
          "projects/middlemass-signing/src/app/core/dto/*"
        ],
        "@middlemass.signing/services/*": [
          "projects/middlemass-signing/src/app/core/services/*"
        ],
        "@middlemass.signing/shared/*": [
          "projects/middlemass-signing/src/app/shared/*"
        ],
        "@middlemass.signing": [
          "projects/middlemass-signing/src"
        ],
        "@middlemass.signing/*": [
          "projects/middlemass-signing/src/*"
        ],
        "@middlemass.common": [
          "projects/middlemass-common/src"
        ],
        "@middlemass.common/*": [
          "projects/middlemass-common/src/*"
        ]
      }
    },
    "angularCompilerOptions": {
      "fullTemplateTypeCheck": true,
      "strictInjectionParameters": true,
      "preserveWhitespaces": false
    }
  }
  

Answer 1

So this ended up not really being either a VSCode or tsconfig issue. I can't believe I've missed this from day one, but basically this code base consists of three separate projects in one root directory. Day-to-day, my team and I will work on one of the three projects at a time and I've always opened the specific project directories when doing development. The tsconfig file exists in the root directory. Even though the separate projects have their own tsconfig files that inherit the root one, not having the root directory opened in VSCode was causing this issue.

So basically the code base is set up:

Projects Folder (root with the "master" tsconfig)
   --Project I (with its own tsconfig that extends the root tsconfig)
   --Project II (with its own tsconfig that extends the root tsconfig)
   --Project III (with its own tsconfig that extends the root tsconfig)

And I just needed to open the Projects folder in VSCode for the base path shortcuts to work. Before I assumed that because the child project folders had their own tsconfig files that extended from the root, it would be ok just to open those individual folders in VSC, but this was not the case. I had to have the root folder open which contains the master tsconfig file.

One drawback to doing this is that searching for files or code within one project could return results from the other projects. However, there are some modifications you can make to your VSC workspace settings to prevent this, ex:

"search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/*.code-search": true,
    "**/projects/project1": true,
    "**/projects/project2": false
    "**/projects/project3": false
  }

With this setup, if you're in project1 you'll only get search results in project1... you could just modify this pattern for whichever project you're working in.