The module 'SharedModule' has imported an unexpected value of 'undefined'

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.

Answer №1

Make sure that the path from which you've imported SharedModule begins with src/. Consider using a relative path instead, such as starting with ./../. Don't forget to update the import statements in SharedModule accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the map() function to parse a Json object

Looking for guidance with working with a JSON object structured like this: {"Title":"asb","Date":"2019","Other":"not important"} How can I correctly read this object and render it in <ul><li> format? Please Note: I have attempted to assign th ...

Angular Material 2: Tips for Differentiating Multiple Sortable Tables in a Single Component

Greetings, esteemed members of the Stackoverflow community, As per the Angular Material 2 documentation, it is mentioned that you can include an mdSort directive in your table: Sorting The mdSort directive enables a sorting user interface on the colum ...

Decoding the `this` Mystery in VueJS

Recently, I decided to delve into the world of VueJS starting from square one. Following their official guide has been a helpful resource, but I've hit a roadblock at this section. One particular example in the guide caught my attention... var app5 = ...

The dropdown feature on my theme seems to be malfunctioning on Wordpress

I'm having trouble figuring out what I'm doing wrong. The dropdown navigation works fine with the default Wordpress twentyeleven theme, but when I switch to my custom theme, the dropdown stops appearing. Here is the code I'm using: <div ...

Exploring Angular's ability to utilize the Map and Subscribe functions within an

I could use some assistance with RxJS. I have a piece of code that is supposed to fetch an API and then, for each returned element, retrieve the type of that element from another API. The code is functioning properly, but it returns an Observable for the ...

What is the best way to create a compound query in Firebase?

I am working on a TypeScript script to search for a city based on its population... import { getFirebase } from "react-redux-firebase"; ... get fb() { return getFirebase(); } get fs() { return this.fb.firestore(); } getCollection(coll ...

How do I add a new module to an existing one using Angular-CLI?

After generating modules: $ ng generate module myTestModule installing module create src/app/my-test-module/my-test-module.module.ts $ ng generate module myTestModule2 installing module create src/app/my-test-module2/my-test-module2.module.ts I ha ...

Having a parameter that contains the characters '&' and '&' can potentially disrupt an AJAX call

Even though there is a similar question here: Parameter with '&' breaking $.ajax request, the solutions provided do not apply to my specific issue. This is because both the question and answers involve jQuery, which I am not familiar with. I ...

Develop an exclusive "click-once" button for a webpage

Can anyone assist me in creating a "one-time clickable" button to launch my website? I've searched through numerous threads on Stack Overflow but haven't found a solution yet. ...

Is there a reason why angularJS doesn't provide the exact error location directly, opting instead to just offer a link to their website that provides a generic explanation?

Why does AngularJS not provide the specific error location directly, such as which file the error is in, instead of just giving a link to their website with a generic explanation? This makes debugging very challenging! Whenever there is an error, it becom ...

Issues with displaying or hiding a DIV using javascript - popup box unresponsive

I am working with this ASPX code: <div id="IsAccountingOk" class="modalDialog"> <div> <a href="#close" title="Close" class="close">X</a><br /> <asp:Label ID="lblIsAccountingOkHeader" runat="server" Text ...

Obtain one option from the two types included in a TypeScript union type

I am working with a union type that consists of two interfaces, IUserInfosLogin and IUserInfosRegister. The TUserInfos type is defined as the union of these two interfaces. export interface IUserInfosLogin { usernameOrEmail: string; password: string; } ...

Tips for sending props to Material UI components

Hey there! I'm currently working on a progressbar component that utilizes animations to animate the progress. I've styled the component using Material UI classes and integrated it into another component where I pass props to customize the progres ...

Is there a way to verify if a user taps outside a component in react-native?

I have implemented a custom select feature, but I am facing an issue with closing it when clicking outside the select or options. The "button" is essentially a TouchableOpacity, and upon clicking on it, the list of options appears. Currently, I can only cl ...

The basic Node.js API for greeting the world encountered a connection failure

I'm currently working on setting up a basic hello world route using nodejs and express. After running node index.js, I see listening on port 3000 in the console, but when I attempt to access http://localhost:3000/helloworld, it just keeps trying to co ...

The typical initial default argument to be passed to the function using fn.apply

Recently, I discovered the power of using fn.apply() in JavaScript to store function calls with all their arguments intact for future use. In my specific situation, I don't require the first argument, which is the context (this), and I want to find a ...

Encountering a 404 error when trying to access the rxjs node_module

While attempting to compile an angular2 application, I encountered the following issue: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/rxjs(…) systemjs.config.js (function(global) { // map tells the System loader whe ...

Currently, I am experiencing difficulties with two specific aspects of the website I am working on - the hamburger menu and the slideshow feature

I'm having trouble with the menu on my website. It's not functioning as expected - the dropdown feature isn't working, and two items are not staying in the correct position under the parent ul despite attempts to position them using CSS. Add ...

best practices for transferring object data to a table with ng-repeat

I have an object called 'SEG-Data with the following structure. I am attempting to display this data in a table using ng-repeat. SEG_Data Object {ImportValues: Array[2]} ImportValues: Array[2] 0: Object ImportArray: "004 ...

How to format values in a textarea using AngularJS

Is there a way to address the following issue without replacing \n with other values? A user can input a description for something in a textarea and include line breaks. In the controller, there is a value called description which includes a string ...