Unexpected value 'undefined' imported by the module 'SharedModule'

Question

In angular application i would like to use a same component in multiple times.

The component which gets used multiple times is DynamicFormBuilderComponent which is exported in DynamicFormModule..

Here the application is in library structure so i have a separate module for each one..

DynamicFormModule has the following,

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 { }

So this is the parent and i would like to use the DynamicFormBuilderComponent in any component in another library,

Say i am going to use this DynamicFormBuilderComponent in a library called Template and any other library's component wherever i want.

So i am trying to import NgiDynamicFormsModule in SharedModule.. And shared module has 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 am trying to import the shared module in a library called NgiTemplate like,

    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 { 

}

If i follow these steps then i am getting the error as,

Uncaught Error: Unexpected value 'undefined' imported by the module 'SharedModule'
    at syntaxError (compiler.js:1021)
    at compiler.js:10610
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10579)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleSummary (compiler.js:10514)
    at compiler.js:10601
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10579)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:24428)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24409)

I also had a thourough search around for solution but nothing solves the issue.

Kindly help me to clear this error and to use the dynamicform builder component in any modules..

Answer 1

You have imported SharedModule from path starting with src/. Try changing the path to a relative path: something starting with ./../. Change the import statements in SharedModule as well.