Cannot import my custom components in Angular-CodePudding

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.module.ts
|--input
|---input.module.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 { }

CodePudding user response：

This error is usually occures when you did not import the module, where you want to use that component. So the module which has the base page component should import the WidgetsModule.

CodePudding user response：

add these lines in your app.module.ts file

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations:[
      HeaderComponent,
      FooterComponent,
      SidebarComponent,
      InputComponent
      ],
  imports : [  ----  ],

  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})