Angular 看不到我的组件的选择器

Question

我已经创建了组件（滑块），但我在另一个文件（主页）中看不到他。

如果“app-slider”是 Angular 组件，则验证它是否是该模块的一部分。

slider.component.tsapp-slider我的选择器 在哪里

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

Components.module.tsdeclatations/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>
            ....

PagesModule我的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相同的。请检查链接

页面模块

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

Answer 1

您ComponentsModule不应在应用程序的根模块 ( AppModule) 中导入，而应在实际使用它的模块中导入。在你的情况下，PagesModule应该导入 ComponentsModule.

只有在导入的模块中声明服务（通过注入器机制）时，整个应用程序才可以使用服务AppModule。