Angular do not see the selector of my component

I have created component (slider) and I cant see him in another file (main-page).

If 'app-slider' is an Angular component, then verify that it is part of this module.

slider.component.ts where my app-slider selector

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

components.module.ts the module where I declatations/export my SliderComponent

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SliderComponent } from './slider/slider.component';

import { SharedModule } from '../shared/shared.module';

    @NgModule({
      imports: [
        CommonModule,
        SharedModule.forRoot()
      ],
      declarations: [SliderComponent],
      exports: [SliderComponent]
    
    })
    export class ComponentsModule { }

main-page.component.html where I use <app-slider></app-slider>

<div class="content">
    <section class="main">
        <div class="container">
            <app-slider></app-slider>
            ....

PagesModule where my MainPageComponent

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

import { SharedModule } from '../../shared/shared.module';

import { MainPageComponent } from './main-page/main-page.component';




@NgModule({
  imports: [
    CommonModule,
    SharedModule.forRoot()
  ],
  declarations: [MainPageComponent],

})
export class PagesModule { }

App.module.ts with both modules

import { ComponentsModule } from './components/components.module';
import { PagesModule } from './routes/pages/pages.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    ComponentsModule,
    PagesModule,
...

UPD 1
I have removed ComponentsModule and PagesModule from App.modules and Imported ComponentsModule in PagesModule but problem is the same. Please check the link

PagesModule

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

import { SharedModule } from '../../shared/shared.module';

import { ComponentsModule } from '../../components/components.module';
import { MainPageComponent } from './main-page/main-page.component';


    @NgModule({
      imports: [
        CommonModule,
        ComponentsModule,
        SharedModule.forRoot()
      ],
      declarations: [MainPageComponent],
    
    })
    export class PagesModule { }

App.module.ts after update

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { RoutesModule } from './routes/routes.module';
import { SharedModule } from './shared/shared.module';
import { LayoutModule } from './layout/layout.module';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    LayoutModule,
    RoutesModule,
    SharedModule.forRoot(),
    CoreModule,
    BrowserModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }