title: Angular do not see the selector of my component
body: <p>I have created component (slider) and I cant see him in another file (main-page).</p>
  <blockquote>
  <p>If 'app-slider' is an Angular component, then verify that it is part
  of this module.</p>
  </blockquote>
  <p><strong>slider.component.ts</strong>  where my <code>app-slider</code> selector</p>
  <pre><code>@Component({
    selector: 'app-slider',
    templateUrl: './slider.component.html',
    styleUrls: ['./slider.component.scss']
  })
  export class SliderComponent implements OnInit {
  </code></pre>
  <p><strong>components.module.ts</strong> the module where I <code>declatations/export</code> my  <code>SliderComponent</code></p>
  <pre><code>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 { }
  </code></pre>
  <p><strong>main-page.component.html</strong> where I use <code>&lt;app-slider&gt;&lt;/app-slider&gt;</code></p>
  <pre><code>&lt;div class=&quot;content&quot;&gt;
      &lt;section class=&quot;main&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;app-slider&gt;&lt;/app-slider&gt;
              ....
  </code></pre>
  <p><strong>PagesModule</strong> where my <code>MainPageComponent</code></p>
  <pre><code>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 { }
  </code></pre>
  <p><strong>App.module.ts</strong> with both modules</p>
  <pre><code>import { ComponentsModule } from './components/components.module';
  import { PagesModule } from './routes/pages/pages.module';
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      CommonModule,
      ComponentsModule,
      PagesModule,
  ...
  </code></pre>
  <p><strong>UPD 1</strong><br />
  I have removed <code>ComponentsModule</code> and <code>PagesModule</code> from <code>App.modules</code> and Imported <code>ComponentsModule</code> in <code>PagesModule</code> but problem is the same. Please check the <a href="https://prnt.sc/v2aeeb" rel="nofollow noreferrer">link</a></p>
  <p><strong>PagesModule</strong></p>
  <pre><code>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 { }
  </code></pre>
  <p><strong>App.module.ts</strong> after update</p>
  <pre><code>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 { }
  </code></pre>