As part of the business logic requirements, it is necessary for me to extract the meta data from dynamic components (EntryComponents).
The approach I am taking to extract this meta data is as follows:
- Retrieve all components within a module using ComponentFactoryResolver
- Filter out classes based on Component name and specific method
- Instantiate the component and extract the data
- Destroy the component afterwards.
.
const factories = Array.from<any>(this.resolver['_factories'].keys());
console.log(factories); // Outputting all available factories
factories.forEach(element => {
if (element.prototype.registerReportCard) {
temp.push(element.prototype.constructor.name);
}
});
temp.forEach(componentName => {
const factoryClass = factories.find(
item =>
item.prototype.registerReportCard &&
item.prototype.constructor.name === componentName
);
const component = this.resolver
.resolveComponentFactory(factoryClass)
.create(this.createInjector());
console.log('component', component);
const componentMeta = component.instance[
'componentMeta'
] as ReportComponentMetaInterface;
component.destroy();
});
createInjector() {
const staticProvider = [{ provide: [], useValue: '' }];
return Injector.create(staticProvider);
}
THE ISSUE
During development, the factory names are functioning correctly and match the class names of the dynamic components. https://i.sstatic.net/jDxUT.png
However, after building the project using ng build --prod. The factory names appear like this: https://i.sstatic.net/JMpGI.png
Firstly, an unknown error is occurring which I cannot identify.
Secondly, the factory class names are identical. This results in the same dynamic component being loaded multiple times (apparently 10 dynamic components).
Below is the NgModule configuration:
@NgModule({
declarations: [
DynamicComponentLoaderDirective,
ContactsCreatedByDayComponent,
ReportSkeletonComponent,
SalesPerformanceComponent,
TopPersonasComponent,
ContactsOverviewComponent,
CompaniesRevenueConversionComponent,
ClosedCompaniesConversionComponent,
AverageTimeCloseComponent,
AverageTimeResponseComponent,
ContactLifecyclePipelineComponent
],
imports: [
CommonModule,
MatButtonModule,
MatProgressSpinnerModule,
ChartsModule
],
entryComponents: [ContactsCreatedByDayComponent, SalesPerformanceComponent, TopPersonasComponent , ContactsOverviewComponent, CompaniesRevenueConversionComponent, ClosedCompaniesConversionComponent, AverageTimeCloseComponent, AverageTimeResponseComponent, ContactLifecyclePipelineComponent],
exports: [DynamicComponentLoaderDirective, ReportSkeletonComponent, TopPersonasComponent, ContactsOverviewComponent, CompaniesRevenueConversionComponent, ClosedCompaniesConversionComponent, AverageTimeCloseComponent, AverageTimeResponseComponent, ContactLifecyclePipelineComponent],
providers: [DashboardReportService]
})
export class DashboardSharedModule {}
I am unsure why this issue is happening. Can you guide me in the right direction?