Angular 10 - baseUrl and paths aren't working

Question

I am trying to make relative import routes be relative from the src/ or app/ folder in a structure like this:

+ node_modules
+ src
| + app
| |  + services (just an example)
| |  |  -service.ts
| |  -app.module.ts (etc.)
| - tsconfig.app.json
- tsconfig.json
- package.json

Essentially, I'd like to be able to do import { SomeService } from 'services/some.service'. However, no matter what I specify in my tsconfig.json (or tsconfig.app.json), once I do ng serve, I receive an error claiming it doesn't know how to import the service.

tsconfig.json:

{
  ...
}

src/tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@angular/*": ["../node_modules/@angular/*"],
      "@services/*": [ "app/services/*" ],
      "@interfaces/*": ["app/interfaces/*"]
    },
    "baseUrl": "./",
    ...
  },
  ...
}

My Angular and Typescript versions:

"@angular/core": "^10.2.3",
"typescript": "^3.9.7"

Am I missing something?

Answer 1

The solution copied from sandangel's comment from over at tsconfig paths and module resolution errors in VS Code (GitHub) seemed to help:

vscode seem to only look into nearest tsconfig.json file, while angular read your tsconfig.app.json You should add relative path config to both tsconfig.json and tsconfig.app.json.