Блог

Я создал компонент (слайдер), и я не могу видеть его в другом файле (главная страница).

Если ‘app-slider’ является компонентом Angular, то убедитесь, что он является частью этого модуля.

slider.component.ts, где мой app-slider селектор

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

components.module.ts модуль declatations/export , в котором я 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 где я использую <app-slider></app-slider>

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

PagesМодуль, где мой 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 с обоими модулями

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

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

UPD 1
Я удалил ComponentsModule и PagesModule из App.modules и импортировал ComponentsModule , PagesModule но проблема та же. Пожалуйста, проверьте ссылку

PagesМодуль

 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 после обновления

 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 { }
  

Ваш ComponentsModule должен быть импортирован не в корневом модуле вашего приложения ( AppModule ), а в модулях, которые его фактически используют. В вашем случае PagesModule следует импортировать ComponentsModule .

Только службы становятся доступными для всего приложения при объявлении в модуле, который импортируется AppModule (через механизм инжекторов).