When working with an Angular application, I want to be able to use the same component multiple times.
The component that needs to be reused is called DynamicFormBuilderComponent
, which is part of the DynamicFormModule
.
Since the application follows a library structure, each component has its own module.
The DynamicFormModule includes:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DynamicFormBuilderComponent } from './dynamic-form-builder/dynamic-form-builder.component';
@NgModule({
imports: [
BrowserModule
],
declarations: [DynamicFormBuilderComponent],
exports: [DynamicFormBuilderComponent],
entryComponents : [DynamicFormBuilderComponent]
})
export class NgiDynamicFormsModule { }
Now, in order to use the DynamicFormBuilderComponent in any other component within another library,
For example, let's say I want to utilize this DynamicFormBuilderComponent
in a library named Template
and any other components within different libraries as needed.
To achieve this, I try to import the NgiDynamicFormsModule
into the SharedModule. The shared module contains the following:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgiDynamicFormsModule } from 'projects/ngi-dynamic-forms/src/public_api';
@NgModule({
imports: [
CommonModule,
NgiDynamicFormsModule
],
declarations: [],
exports: [NgiDynamicFormsModule],
})
export class SharedModule { }
I then proceed to import the shared module into a library called NgiTemplate
like this:
import { CommonModule } from '@angular/common';
import { NgiTemplateComponent } from './ngi-template.component';
import { SharedModule } from 'src/app/shared/shared.module';
@NgModule({
imports: [
CommonModule,
SharedModule
],
declarations: [NgiTemplateComponent],
exports: [NgiTemplateComponent],
entryComponents : [NgiTemplateComponent]
})
export class NgiTemplateModule {
}
Following these steps, I encounter the error message:
Uncaught Error: Unexpected value 'undefined' imported by the module 'SharedModule'
at syntaxError (compiler.js:1021)
at compiler.js:10610
at Array.forEach (<anonymous>)
...
I have searched extensively for a solution to this issue but nothing seems to resolve it. Any assistance in clearing this error and enabling the use of the dynamic form builder component across modules would be greatly appreciated.