Specify path in tsconfig.json instead of using relative path : ERROR in src/app/app.module.ts: error TS2307: Cannot find module '@…'

Question

I am trying to resolve the relative path imports for component using the path property of tsconfig.json . But, it gives the below error. Not sure, why it giving this error. May it due to that src/components folder is not inside the src/app folder ?

Actual Error :

ERROR in src/app/app.module.ts(12,33): error TS2307: Cannot find module '@advent/components'.

1) This is my folder structure :

src
  - app 
      - app.module.ts
      - app.component.ts
      - app.component.html
      - app.component.css
  - components
      - modals
          - modals.component.ts
          - modals.component.html
          - modals.component.css 
      - index.ts
tsconfig.json

2) tsconfig.json

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

3) index.ts

export * from './modals/modals.component';

4) modals.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'modals',
  templateUrl: './modals.component.html',
  styleUrls: ['./modals.component.scss']
})
export class ModalsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

5) app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

// Importing Components
import { AppComponent } from './app.component';
import { ModalsComponent } from '@advent/components';


@NgModule({
  declarations: [
    AppComponent,
    ModalsComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Update below line in tsconfig.json

1. If tsconfig.json file is located in src folder and baseUrl = "."

"@advent/components/*": [ "./components/*" ]

2. If tsconfig.json file is located outside src folder and baseUrl = "."

"@advent/components/*": [ "./src/components/*" ]

3. If tsconfig.json file is located outside src folder and baseUrl = "./src"

"@advent/components/*": [ "./components/*" ]