如何在 AppComponent 以外的其他组件中使用从共享模块导入的 Angular 组件

Question

Using Angular8

I have created a module( ChartsModule ) that exports other components. I could import the module in app.module.ts file and use the templates that are exported in app.component.html , however trying the same by creating another component with a module that imports ChartsModule does not work.

ChartsModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PieChartComponent } from './pie-chart/pie-chart.component';
import { LinesChartComponent } from './lines-chart/lines-chart.component';
import { TableChartComponent } from './table-chart/table-chart.component';

@NgModule({
  declarations: [PieChartComponent,LinesChartComponent,TableChartComponent],
  imports: [
    CommonModule
  ],
  exports:[PieChartComponent,LinesChartComponent,TableChartComponent]
})
export class ChartsModule { }

Inside the app.module.ts

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    NgbModule,
    XComponent,
    ChartsModule]

Using the templates inside app.component.html;

<app-pie-chart></app-pie-chart>
<app-table-chart></app-table-chart>

QUESTION;

How can I achieve the same effect by importing ChartsModule into component X. This is what I did; generate component X and add a module that will import ChartsModule and then to use the templates inside x.html .

x.module.ts

import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from '../data-charts/charts.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ChartsModule
  ],
  // schemas:[CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})

export class XModule { }

Inside of x.component.html

<app-pie-chart></app-pie-chart>
<app-table-chart></app-table-chart>

I get the error;

Uncaught Error: Template parse errors:
'app-pie-chart' is not a known element:
1. If 'app-pie-chart' is an Angular component, then verify that it is part of this module.
2. If 'app-pie-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<router-outlet></router-outlet>

Answer 1

The component X must be a member of some module. Import ChartsModule there.

Answer 2

The mistake is in your AppModule imports. You can't import components , only modules that has components.

In this case you must put your xComponent inside the declarations: [] of your xModule for a correct solution.

Anyways, if you want to use components that whitin ChartsModule you should declare your xComponent inside declarations: [] of any module that has ChartsModule inside his imports: []

Hope it helps!

Answer 3

You have to declare XComponent in XModule for the required result.

x.module.ts

import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from '../data-charts/charts.module';
// Import `XComponent` here.

@NgModule({
  declarations: [XComponent], // Just added reference. 
  imports: [
    CommonModule,
    ChartsModule
  ],
  // schemas:[CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})

export class XModule { }

Answer 4

This is how got it solved;

I imported XComponent into Xmodule, removed XComponent importation from app.module.ts and imported Xmodule inside app.module.ts;

xmodule.ts

import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from '../data-charts/charts.module';
import {XComponent} from './x.component';

@NgModule({
  declarations: [XComponent], 
  imports: [
    CommonModule,
    ChartsModule
  ],
})

export class XModule { }

app.module.ts

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    NgbModule,
    Xmodule,
    ]