Cannot shorten import paths with tsconfig.json

Issue

The paths I defined in tsconfig.json do not work.

I started a project with Ionic 4 and wanted to avoid ugly paths in the imports. I found information about modifying tsconfig.json, which I did. I already found these answers: How to use paths in tsconfig.json? and Cannot resolve tsconfig paths

So my tsconfig.json looks like this:

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

And I access a class that specifies a user in my service:

import { User } from '@data/User';

The User class looks like this:

export class User {
   ...
}

My project structure looks like this:

I don't see any difference between my code and the different solutions I shared. The error shown is:

[ng] ERROR in src/app/services/profile.service.ts(3,22): error TS2307: Cannot find module '@data/User'. [ng]

What am I doing wrong?

Solution

Advices for Typescript paths(especially in Angular CLI context)

1. After setting Paths inside your tsconfig.json you should restart your server in order to make it works as expected.

2. Always make sure your path begin with the root folder in order to avoid possible errors e.g using the src folder as root.

Answered By - billyjov