Cannot import my custom components in Angular

Issue

I am quite new to Angular and have a problem importing my components. I declaired a module where I get all the components in, to use it as a shared components module I use input component inside sidebar component, and sidebar component on the app module, works fine. The problem is when I want to use input component inside base page, I import the module and use the tag on the html side and visual studio code doesn't warn me anything, but when compiling, console tells me that 'app-input' is not a known element

In my project I have the following structure

App
|-pages
|--base
|
|-widgets
|--sidebar
|---sidebar.component.ts
|--input
|---input.component.ts
|--widgets.module.ts
|
|-app.module.ts

input.component.ts

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

widgets.module.ts

import { NgModule } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { InputComponent } from './input/input.component';



@NgModule({
  declarations:[
    HeaderComponent,
    FooterComponent,
    SidebarComponent,
    InputComponent
  ],
  exports:[
    HeaderComponent,
    FooterComponent,
    SidebarComponent,
    InputComponent
  ]
})
export class WidgetsModule { }

I coudn't find any solution on the internet (or coudn't figure out what's going on for sure) and I have been looking to solve it for a week. I look forward for your answers and thanks in advance

EDIT 1

base.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BaseRoutingModule } from './base-routing.module';
import { BaseComponent } from './base.component';
import { WidgetsModule } from 'src/app/widgets/widgets.module';


@NgModule({
  declarations: [
    BaseComponent
  ],
  imports: [
    CommonModule,
    BaseRoutingModule,
    WidgetsModule
  ]
})
export class BaseModule { }

EDIT 2

Correct the folder structure

Solution

After reviewing your repository, I found out that your issue is that you've not imported the BaseModule inside your AppModule. Otherwise your logic was correct.

Answered By - justchecking