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

Struggling to implement a seamless scrolling effect using CSSTransition Group

In my quest to achieve a smooth vertical scroll effect for content appearing and disappearing from the DOM, I've turned to CSSTransitionGroup (or ReactTransitionGroup). While I'm familiar with CSS animations for such effects, I need to implement ...

What is the best way to output a received HTML page from the server?

I'm currently working on printing an HTML page that was generated using Node.js on my server. After sending the page to the client side as a response to an AJAX request, I have stored it in a JavaScript variable. var resp_json = printRequest.getRespo ...

Using Angular's asyncValidator in conjunction with BehaviorSubject allows for real

Currently, I am working on developing an Angular form. Below is a snippet of my code where I am attempting to construct a multi-group form with an async validator. The scenario involves validating whether a number exists in a specific list. In a real-worl ...

Getting duplicate tokens for multiple users while utilizing Firebase messaging

When attempting to acquire a token from firebase, I employ the code snippet provided below: const messaging = firebase.messaging(); messaging.requestPermission() .then(() =>{ return firebase.messaging().getToken(); }).then(token => { s ...

Retrieve the document id along with the corresponding data from a collection

Retrieving data from the collection leads and displaying all documents in an HTML table. Upon clicking, I need to extract the document ID of the clicked item as it serves as the sole primary key. P.S I am able to obtain records of all documents in an arra ...

What is the best way to initiate a function upon each page load?

(Apologies in advance for any English mistakes) Hello everyone, I am currently developing a simple Chrome extension to edit certain graphics and text fields on a website (Freshdesk) that cannot be modified directly on the site due to proprietary code. ...

Nextjs style import function properly on the development server, but faces issues when deployed to production environments

import "../styles.css"; import styles from "react-responsive-carousel/lib/styles/carousel.min.css"; import "react-owl-carousel2/lib/styles.css"; import { Provider } from "react-redux"; import store from "../store/store" function App({ Component, pageProps ...

I'm encountering a 502 error while trying to use Supabase's signInWIthPassword feature

Despite all authentication functions working smoothly in my React, TypeScript, and Supabase setup, I'm facing an issue with signInWithPassword. In my context: I can successfully signIn, create a profile, and perform other operations like getUser() an ...

Redirect link depending on JSON callback information

I experimented with utilizing JavaScript to automatically redirect website visitors based on their country. The code snippet below demonstrates how the visitor's IP is checked to determine their country, such as CN for China, and then redirects them ...

Instantly change the default value with Ajax selection

My current setup involves using Ajax to populate a select HTML element with values from an array returned by PHP. Here is the Ajax code snippet: <script type = "text/javascript"> $(document).ready(function(){ $('#fds_categories&ap ...

Effortless navigation with smooth scrolling on anchor links in react/next.js

Can smooth scrolling be achieved using only CSS when clicking on an anchor link within a react component? ... render( <a href="#smooth-link">Link To There</a> .... <div id="smooth-link"> .... ...

Implementing the rendering functionality in Vuejs 3 to activate the parent component method from its child

Is there a way to call the clicked method on app2 from within ComponentA? Let's explore how this can be achieved in the provided example. const app = Vue.createApp({}); app.component('ComponentA', { template: `<button @click="cl ...

I. Discovering the Step-by-Step Guide on Retrieving User Information from Facebook Upon Generating App

I have set up a Facebook login for user registration on my website. However, I am only able to retrieve the profile name and user ID from Facebook. How can I access the email and other user information? Here is the data I am currently receiving from Faceb ...

Compiling TypeScript to JavaScript with Intellij IDEA while preserving the folder hierarchy

Seeking assistance with maintaining directory structure when compiling Typescript to Javascript in Intellij Idea. The current directory setup is as follows: root - ts - SomeClass1.ts - SomeFolder - AwesomeClass2.ts - tsc The desired compiled file ...

Double invocation of ActivatedRoute.params.subscribe method observed

To extract URL parameters, I'm utilizing the ngOnInit() method where I've implemented the following snippet: this.activatedRoute.queryParams.subscribe(params => { console.log(params); // actual implementation here }); Yet, upon initi ...

The JavaScript Ajax request appears to be malfunctioning in both Firefox and Google Chrome, however, it seems to be functioning properly

I am currently using JavaScript to make an Ajax request to communicate with an Arduino webserver and dynamically update the content on a webpage. While this functionality has been working smoothly in Safari, I have encountered issues when trying to use it ...

Broadcast to every socket except the one that is malfunctioning on Socket.io

My current task involves sending a message to all connected sockets on my server using socket.io. The code I have written so far looks like this: if(electionExists) { var connectedClients = io.sockets.adapter.rooms[electionRequested].sockets; ...

Want to enhance user experience? Simply click on the chart in MUI X charts BarChart to retrieve data effortlessly!

I'm working with a data graph and looking for a way to retrieve the value of a specific column whenever I click on it, and then display that value on the console screen. Check out my Data Graph here I am using MUI X charts BarChart for this project. ...

Tips for effectively logging data retrieved through Ajax requests

When I have content loaded via Ajax with two divs and a list, my goal is to console.log which div I was typing on when clicking on a list item. However, the issue I'm facing is that I always get the first one I clicked until I refresh the page. Altho ...

Obtaining a return value from a function that involves a series of chained Ajax requests in jQuery

I'm facing an issue with my function that involves chained Ajax requests. Function A and B are both Ajax requests, where A runs first and B runs after A returns its data. The problem arises when Function C executes Function B. Upon execution of Funct ...