Import via absolute paths in Angular 9

Question

I want to remove long and unreadable relative imports in my Angular apps, so I changed my tsconfig.json file by updating the paths section as follow:

 {
      "compileOnSave": false,
      "compilerOptions": {
            "downlevelIteration": true,
            "importHelpers": true,
            "outDir": "./dist/out-tsc",
            "sourceMap": true,
            "declaration": false,
            "moduleResolution": "node",
            "emitDecoratorMetadata": true,
            "experimentalDecorators": true,
            //"allowSyntheticDefaultImports": true,
            "target": "es5",
            "typeRoots": [
                "node_modules/@types"
            ],
            "lib": [
                "es2018",
                "dom"
            ],
            "module": "esnext",
            "baseUrl": "./",
            "resolveJsonModule": true,
            "esModuleInterop": true,
            "paths": {
                "core-js/es6/": [
                    "./node_modules/core-js/es/"
                ],
                "@environments/*": [ "src/environments/*" ]
            },
            "skipLibCheck": true
      }
 }

I call the import in my app.module.ts like below:

import { environment } from '@environments/environment';

But on the build process, I get the error:

Cannot find module '@environments/environment'.

Any idea why this error and how to fix it ? Thank you