The module has defined the component locally, however, it has not been made available for

I have developed a collaborative module where I declared and exported the necessary component for use in other modules.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DateslideComponent } from './dateslide/dateslide.component';
import { IonicModule } from '@ionic/angular';
import { TimeslideComponent } from './timeslide/timeslide.component';
import { AddtimeComponent } from './addtime/addtime.component'

@NgModule({
   declarations: [DateslideComponent, TimeslideComponent, AddtimeComponent],
   imports: [
       CommonModule,
       IonicModule
   ],
   exports: [DateslideComponent, TimeslideComponent, AddtimeComponent]
})
export class TimeModule { }

In another module, I imported the shared module as follows:

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { WhenPageRoutingModule } from './when-routing.module';

import { WhenPage } from './when.page'; 
import {TimeModule} from '../../timemodule/time.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    WhenPageRoutingModule,
    TimeModule
  ],
  declarations: [WhenPage ]
})
export class WhenPageModule {}


Within one of the components of the second module, I tried to import a component from the shared module but encountered the following error:

import { AddtimeComponent } from '../../timemodule/time.module'

The module declares the component locally, but it is not being exported.

Answer №1

To avoid importing AddtimeComponent in the main module, it must be exported in SharedModule as shown below:

import { AddtimeComponent } from './addtime/addtime.component';
export { AddtimeComponent } from './addtime/addtime.component';

It's important to note that the export property in NgModule decorator and the export in header serve different purposes. The export property in NgModule is for Angular compiler, while the export in header is for Typescript compiler.

If you only plan on using the selector, then mentioning it in the NgModule decorator should suffice. However, if you intend to import the Typescript class in other modules, you will need to export the class in the feature module.

Answer №2

Instead of re-importing the component, simply import the SharedModule in other modules and utilize the component declared and exported within the SharedModule.

import { SharedModule } from '/path/to/SharedModule';

@NgModule({
  imports: [
    ...
    SharedModule
  ]
})

Try replicating this configuration in a Stackblitz or provide access to the repository for debugging purposes and finding a solution.

EDITED>>

If you are attempting to bootstrap the Component during the module's build process, consider using EntryComponent to ensure that the component is provided from the loaded module.

See code example below:


import { SharedModule } from '/path/to/SharedModule';
import { AddtimeComponent } from '/path/to/AddtimeComponent';

@NgModule({
  imports: [
    ...
    SharedModule
  ],
 entryComponents: [
    AddtimeComponent
  ]
})

For further details, refer to:

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

Using SQLite to handle JSON data

I am currently working with Ionic2/Angular2 framework. My aim is to save data on the user's device or browser. While Local Storage seems like an option, I have concerns about its reliability. Although SQLite is a dependable choice, it uses SQL inste ...

Can someone please provide guidance on how I can access the current view of a Kendo Scheduler when switching between views, such as day view or week

<kendo-scheduler [kendoSchedulerBinding]="events" [selectedDate]="selectedDate" [group]="group" [resources]="resources" style="height: 600px;" [workDayStart]="workDayStart" [workDayEnd] ...

Encountering the error "No exported member ɵɵFactoryDef in Angular 8 when trying to access /node_modules/@angular

Encountering the following error when attempting to run the ng serve command and also in ng build --prod. ERROR in ../node_modules/mat-file-upload/lib/mat-file-upload.component.d.ts:21:21 - error TS2694: Namespace '"/root/storeproj/node_modules/@angu ...

Steps for displaying a loader after refreshing data using queryClient.invalidateQueries:1. Utilize the query

I am currently working on a project where I need to redirect to a specific page after updating an item. While the code is functioning correctly, I have encountered an issue with the loader not displaying. export const useUpdateStatusArchiveSurvey = () => ...

Updating Angular 5 Views Dynamically Using a While Loop

I am facing an issue in my app where I have a progress bar that updates using a while loop. The problem is that the view only updates after the entire while loop has finished running, even though I am successfully changing the update progress value with ea ...

Click on the div in Ionic 2 to send a variable

<div class="copkutusu" (click)="kanalsil(kanalid,deneme)" #kanalid id={{ver.channelid}} #deneme id={{ver.channelapikey}}></div> I am requesting kanalid.id and deneme.id in my .ts file. Even though they are the same variable names, they repres ...

Encountering a "Multiple registrations of the method 'get' on the path '../api/' error" with Swagger

I am utilizing OpenAPI / Swagger in an Angular application built on .NET Core, and I am facing the error "The method 'get' on path '../api/' is registered multiple times" while generating frontend TypeScript code using NSwag Studio. Fro ...

Using react-confetti to create numerous confetti effects simultaneously on a single webpage

I'm looking to showcase multiple confetti effects using the react-confetti library on a single page. However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas fo ...

Having trouble getting errors to display on the Input onChange event with Antd

When using Antd, I am having trouble getting errors in the onChange event. Even when there is an error in a field, I cannot see the errors while typing in that particular field. For example; https://stackblitz.com/edit/react-qurm1n?file=demo.tsx Here are ...

Get started with adding a Typescript callback function to the Facebook Login Button

I am in the process of implementing Facebook login into my Angular7 application using Typescript. Although I have successfully integrated Facebook's Login Button plugin for logging in, I am facing issues with providing a callback method to the button& ...

Internal variable via router

The Back button on my main component is not always visible, depending on the child component. I have attempted to use a local variable with no success. In my parent app.component.html file, I have included the following: <button *ngIf="child.goBackUrl ...

Dynamically updating the scroll area in Ionic using real-time data

Hello, I am currently working on an Ionic project and have created a code pen for it. At the moment, the code pen just displays an image with two buttons for zooming in and out. However, I have encountered an issue. When I click on zoom in and scroll to ...

Can anyone explain how to pass a toggle state along with its onChange function in Ionic React?

Imagine I have this toggle element: <IonToggle id="IonToggleDarkMode" slot="end" checked={vars.darkMode} onChange={darkModeToggle}></IonToggle> The value of vars.darkMode represents the current state of the toggle, which is ...

What's the best way to test a TSX file importing SCSS using Jest?

Here is my configuration for jest: module.exports = { roots: ['<rootDir>/src'], collectCoverageFrom: [ '<rootDir>/src/**/*.{ts,tsx}' ], coverageDirectory: 'coverage', testEnvironment: 'jsdom&apo ...

Select specific columns from an array using Typescript

I have a collection of objects and I'm looking for a way to empower the user to choose which attributes they want to import into the database. Is there a method to map and generate a separate array containing only the selected properties for insertion ...

Updating from React 17 to React 18 in Typescript? The Children of ReactNode type no longer supports inline conditional rendering of `void`

When using the React.ReactNode type for children, inline conditional renders can cause failures. Currently, I am utilizing SWR to fetch data which is resulting in an error message like this: Type 'false | void | Element | undefined' is not assig ...

Assignment of type 'Object' is incompatible with type in new HttpClient / HttpGetModule implementation within Angular

After following the angular tutorial, I decided to test out the new httpClient.Get method. However, it seems that no matter what, it always returns results of type Object. // HttpClient getHeroes2 () { this.http.get<Hero[]>(this.heroesUrl) ...

The use of data binding can lead to the error known as ExpressionChangedAfterItHasBeen

Just getting started with Angular 4 and encountering an ExpressionChangedAfterItHasBeenCheckedError in my data binding field. Here's the code snippet: <form> <div> <h2>Hello {{input.value}}</h2> <input type="text" [valu ...

Is it possible to switch the hamburger menu button to an X icon upon clicking in Vue 3 with the help of PrimeVue?

When the Menubar component is used, the hamburger menu automatically appears when resizing the browser window. However, I want to change the icon from pi-bars to pi-times when that button is clicked. Is there a way to achieve this? I am uncertain of how t ...

Angular is showing an error stating that the type 'EventEmitter' is not generic

As I follow along with a tutorial, I've come across the use of EventEmitter. The code snippet provided in the tutorial is as follows: @Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>(); However, my Visual ...