简体   繁体   中英

Angular components declared in shared module not recognised in feature modules after importing shared module in feature's module

I have imported the shared module into my appModule and used one of its components without issues but doesn't work when I imported my shared module into in my feature module.

Shared Module:

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    CarouselModule
  ],
  declarations: [
    CarouselComponent,
    SpinnerComponent,
    OverviewComponent,
    TableComponent
  ],
  exports: [
    CommonModule,
    CarouselComponent,
    SpinnerComponent,
    OverviewComponent,
    TableComponent
  ],

})
export class SharedModule { }

Feature Module:

@NgModule({
  declarations: [
    IncidentsContainerComponent,
    NewIncidentComponent
  ],
  imports: [
    ReactiveFormsModule,
    IncidentsRoutes, // feature routing
    BsDatepickerModule.forRoot(),
    TimepickerModule.forRoot(),
    NgSelectModule,
    SharedModule
  ],
  providers: [
    IncidentsService
  ]
})
export class IncidentsModule { }

In my feature module component am just using the TableComponent selector:

<app-table></app-table>

and I get this error:

  1. If 'app-table' is an Angular component, then verify that it is part of this module.
  2. If 'app-table' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

The TableComponent :

import { Component, OnInit, Input } from '@angular/core';

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

  @Input() elements: Array<any>;
  @Input() headers: Array<string>;

  constructor() { }

  ngOnInit() {
    console.log('...from table ', this.headers);
    console.log('...from table ', this.elements);
  }

}

This is my project structure:

在此处输入图片说明

In case any one in the future having the same issue, even though the error I was getting was referring to the shared component ('app-table') exported in my SharedModule but the issue was that I forgot to declare the Component in which I am referencing the shared component ('app-table') in its own Module. I think the error Angular should have given is that the component in which I am using my shared component is not registered in any Module and it would have been more clearer and straight forward.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM