Angular5 - Selector doesn't paint component.html when called from another component - selector

Question

So I have two components, ChartsComponent (renders charts) &
DataComponent (displays charts among other data, tables, etc).
The file system would be like:
app/charts/
app/entities/data/
ChartsComponent renders successfully when rendered into its own page with its own route. DataComponent works but can't render ChartsComponent through selector. Console displays no error at all. I tried to call ChartsComponent's selector in DataComponent like this:
data.component.html:
<chart-data></chart-data>
charts.component.html:
<div [chart]="chart1"></div>
charts.component.ts:
import { Component, OnInit} from '#angular/core';
import { Chart } from 'angular-highcharts';
//I'm loading data into the chart statically for trial
import { jsonData} from '../json-data/chart-data';
#Component({
selector: 'chart-data',
templateUrl: './charts.component.html'
})
export class ChartsComponent implements OnInit{
//Chart
chart1: Chart;
countries: any;
num: any;
chartData: any;
constructor() {
this.barChart();
}
ngOnInit(){}
barChart(){
this.chartData = jsonData;
this.chart1 = new Chart(this.chartData);
}
}
data.component.ts:
import { Component, OnInit, OnDestroy } from '#angular/core';
import { HttpResponse, HttpErrorResponse } from '#angular/common/http';
import { ActivatedRoute, Router } from '#angular/router';
import { DataService } from './provision.service';
import { ChartsComponent } from '../../charts/charts.component';
#Component({
selector: 'data-page',
templateUrl: './data.component.html'
})
export class DataComponent implements OnInit, OnDestroy {
}
charts.module.ts:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router';
import { ChartsComponent } from './';
#NgModule({
declarations: [
ChartsComponent
],
exports: [
ChartsComponent
]
})
export class ChartsModule {}
data.module.ts:
import { RouterModule } from '#angular/router';
import { ChartsModule } from '../../charts';
import { ChartsComponent } from '../../charts/charts.component';
import {
DataService,
DataComponent,
DataRoute
} from './';
#NgModule({
imports: [],
declarations: [DataComponent],
entryComponents: [
DataComponent,
ChartsComponent
],
providers: [
DataService
]
})
export class DataModule {}
charts/index.ts:
export * from './charts.component';
export * from './charts.module';
export * from './charts.route';
app.module.ts:
import './vendor.ts';
import { NgModule, Injector } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HTTP_INTERCEPTORS } from '#angular/common/http';
import { Ng2Webstorage, LocalStorageService, SessionStorageService } from 'ngx-webstorage';
import { EventManager } from 'ng-blahblah';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { ChartModule } from 'angular-highcharts';
import { ChartsComponent } from './charts';
import { AuthInterceptor } from './blocks/interceptor/auth.interceptor';
import { AuthExpiredInterceptor } from './blocks/interceptor/auth-expired.interceptor';
import { ErrorHandlerInterceptor } from './blocks/interceptor/errorhandler.interceptor';
import { NotificationInterceptor } from './blocks/interceptor/notification.interceptor';
import { SharedModule, UserRouteAccessService } from './shared';
import { AppRoutingModule} from './app-routing.module';
import { HomeModule } from './home/home.module';
import { AdminModule } from './admin/admin.module';
import { AccountModule } from './account/account.module';
import { EntityModule } from './entities/entity.module';
import { PaginationConfig } from './blocks/config/uib-pagination.config';
import {
MainComponent,
NavbarComponent,
FooterComponent,
ProfileService,
PageRibbonComponent,
ActiveMenuDirective,
ErrorComponent
} from './layouts';
#NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
SharedModule,
HomeModule
EntityModule,
ChartModule
],
declarations: [
MainComponent,
NavbarComponent,
ErrorComponent,
PageRibbonComponent,
ActiveMenuDirective,
FooterComponent,
ChartsComponent
],
providers: [
ProfileService,
PaginationConfig,
UserRouteAccessService,
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true,
deps: [
LocalStorageService,
SessionStorageService
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: AuthExpiredInterceptor,
multi: true,
deps: [
Injector
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorHandlerInterceptor,
multi: true,
deps: [
EventManager
]
},
{
provide: HTTP_INTERCEPTORS,
useClass: NotificationInterceptor,
multi: true,
deps: [
Injector
]
},
/*{
provide: NgbDateParserFormatter,
useFactory: () => { return new NgbDateMomentParserFormatter("DD-MM-YYYY") }
}*/
],
bootstrap: [ MainComponent ]
})
export class AppModule {}
I think that's all what's relevant, if someone could explain what's wrong, missing and why, it would be of great help. In the meanwhile I'll try to document myself better on the module/import system.

Answer 1

Ok so basically, the module.ts file in which you are going to import the ChartsComponent and the ChartModule (we are talking highcharts here) needs to also export ChartsComponent.
Import both, then under NgModule import ChartModule, and under declarations and exports tag ChartsComponent. On the destination data.module import ChartsComponent and tag it under NgModule - entryComponents. On the destination DataComponent import ChartsComponent.