tsconfig short paths not working in vs code

Question

I have setup my angular project like this:

https://angularfirebase.com/lessons/shorten-typescript-imports-in-an-angular-project/

But it doesn't appear to be working. My tsconfig looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "es2015",
    "baseUrl": "./",
    "paths": {
      "@data/*": ["src/app/core/data/*"],
      "@constants/*": ["src/app/core/constants/*"],
      "@models/*": ["src/app/core/models/*"],
      "@services/*": ["src/app/core/services/*", "src/app/core/sessions/*"],
      "@shared/*": ["src/app/shared/*"]
    }
  }
}

I have painstakingly gone through my entire application and replaced all the "long" paths with these new ones and when I try to do an ng serve I get loads of errors.

Here are a couple:

ERROR in src/app/categories/categories.component.ts(3,31): error TS2307: Cannot find module '@constants/animations'.

src/app/core/components/animations/animations.component.ts(3,34): error TS2307: Cannot find module '@constants/animations'.

src/app/core/components/animations/animations.component.ts(4,34): error TS2307: Cannot find module '@services/animation.service'.

src/app/core/components/spinner/spinner.component.ts(3,32): error TS2307: Cannot find module '@services/loading.service'.

There are loads and when I look at the actual components/modules the intellisense shows no issues. Does anyone know why this might be happening?

Answer 1

This was simply to do with the basePath. It should be set to "src". So now, it looks like this:

"baseUrl": "src",
"paths": {
  "@data/*": ["app/core/data/*"],
  "@constants/*": ["app/core/constants/*"],
  "@models/*": ["app/core/models/*"],
  "@services/*": ["app/core/services/*", "app/core/sessions/*"],
  "@shared/*": ["app/shared/*"]
}