Attempting to resolve relative path imports for a component using the path property in tsconfig.json. However, encountering the following error. Unsure why this error is occurring. Could it be because the src/components folder is not located inside the src/app folder?
Error Message :
ERROR in src/app/app.module.ts(12,33): error TS2307: Cannot find module '@advent/components'.
1) 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 { }