Cannot find namespace 'SpotifyApi' (@types/spotify-api) error in angular project

I have two projects, one api and one client (angular) project. In my angular project I have the following tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": ["ES2022", "dom"],
    "paths": {                          /* <-- note this bit */
      "@shared/*": ["../api/src/*"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

As you can see I added the paths object in order to import files from "../api/src/*" (the api project). This is working fine, only I have a file at "../api/src/schema/request.d.ts":

export namespace Request {
  export interface GetPlaylistTracks {
    Params: {
      playlistId: string;
    };
    ResBody: SpotifyApi.PagingObject<any> | undefined;
    ReqBody: {};
    ReqQuery: {
      offset: string;
      limit: string;
    };
  }
}

which I'm trying to import inside the angular project like so

import { Request } from '@shared/schema/request';

getting the error

Error: ../api/src/schema/request.d.ts:26:14 - error TS2833: Cannot find namespace 'SpotifyApi'. Did you mean 'Spotify'?

26     ResBody: SpotifyApi.PagingObject<any> | undefined;

The namespace SpotifyApi is coming from @types/spotify-api (which is working fine inside my api project). In both projects inside my package.json I have

{
  ...
  "devDependencies": {
    ...
    "@types/spotify-api": "^0.0.22"
  }
}

Instead of having on devDependencies Did you try adding "@types/spotify-api": "^0.0.22" to dependencies.

• "dependencies": Packages required by your application in production.
• "devDependencies": Packages that are only needed for local
  development and testing.

Since you are referring the SpotifyApi.PagingObjec in a model. You need yo add it to dependencies.

I could solve the problem by adding

import 'spotify-api';

to request.d.ts file. Still I don't know why this is necessary. Btw., I'm having the same problem when not using paths property, i.e. SpotifyApi is not working inside any angular project, only in my backend project. VS Code is not showing any errors, they just appear in the terminal/web client.