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

What is the process of converting TypeScript to JavaScript in Angular 2?

Currently diving into the world of Angular 2 with TypeScript, finding it incredibly intriguing yet also a bit perplexing. The challenge lies in grasping how the code we write in TypeScript translates to ECMAScript when executed. I've come across ment ...

The click event triggered by the onclick clone/function may not always activate the click handler

As a newcomer in the JavaScript domain, I am encountering an issue where the first clone created after clicking 'add more' does not trigger my click me function. However, every subsequent clone works perfectly fine with it. What could be causing ...

The object might be undefined; TypeScript; Object

Why is it that the object may be undefined, even though it is hard-coded in my file as a constant that never changes? I've tried using ts-ignore without success. const expressConfig = { app: { PORT: 3000, standardResponse: `Server ...

What is the best way to rekindle the d3 force simulation within React's StrictMode?

Creating an interactive force directed graph in React using D3 has been successful except for the dragging functionality not working in React StrictMode. The issue seems to be related to mounting and remounting components in ReactStrict mode 18, but pinpoi ...

When working with TypeScript, how do you determine the appropriate usage between "let" and "const"?

For TypeScript, under what circumstances would you choose to use "let" versus "const"? ...

Refresh Information Stripe

I'm currently working on implementing Stripe, and utilizing metadata in the process. Everything works smoothly until I come across a scenario where I need to update a value in the metadata to determine if a specific uuid has been used before. pay ...

Troubleshooting: Issues with Angular 2's default routing system

My Angular 4 app's default route isn't functioning properly. Could it be conflicting with my express routes? Interestingly, the wildcard route seems to be working fine. I'm puzzled as to what the issue might be. Here are my Angular routes: ...

Managing Access Control Origin Headers in an Angular 4 Application

I currently have a Play framework based REST API running locally on port 9000 of my machine. Additionally, I have an Angular 4 application running on port 4200 on the same localhost. My goal is to have this Angular app display the JSON data received from ...

Retrieve a collection within AngularFire that includes a subquery

I have the following function getParticipations( meetingId: string ): Observable<Participation[]> { return this.meetingCollection .doc(meetingId) .collection<ParticipationDto>('participations') .snapshotCh ...

What could be the reason for TypeScript throwing an error that 'product' does not exist in type '{...}' even though 'product' is present?

Structure of Prisma Models: model Product { id String @id @default(auto()) @map("_id") @db.ObjectId name String description String price Float image String createdAt DateTime @default(now()) updatedAt Da ...

"Looking to personalize marker clusters using ngx-leaflet.markercluster? Let's explore some ways to customize

I am currently struggling to implement custom cluster options in ngx-leaflet. My goal is simply to change all marker clusters to display the word "hello". The demo available at https://github.com/Asymmetrik/ngx-leaflet-markercluster/tree/master/src/demo/a ...

I'm encountering an Unsupported platform error for Angular installation when using [email protected] Does anyone know how to troubleshoot this issue?

C:\Users\vivek>npm install -g @angular/cli C:\Users\vivek\AppData\Roaming\npm\ng -> C:\Users\vivek\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng npm WARN ...

Listening for Backdrop Click in Angular NgBootstrap Modal

Whenever I open the modal, a form will appear. If the user starts filling out the form but accidentally clicks on the backdrop, the default action is for the modal to close. However, I am interested in capturing this event because I want to display a new ...

Retrieve the service variable in the routing file

How do I access the service variable in my routing file? I created a UserService with a variable named user and I need to use that variable in my routing file. Here is the approach I tried, but it didn't work: In the routing file, I attempted: cons ...

Issues with the ionViewDidLoad() function?

Having some trouble implementing Email Authentication in my project. The method ionViewDidLoad is not being recognized. I also tried using the method ionViewWillLoad() but that didn't work either. Any ideas on what might be causing this issue? Here&a ...

Manipulate Angular tabs by utilizing dropdown selection

In my latest project, I have developed a tab component that allows users to add multiple tabs. Each tab contains specific information that is displayed when the tab header is clicked. So far, this functionality is working perfectly without any issues. Now ...

I am looking to refund the sum

I need assistance with returning an amount from a specific function. I have created a function called getWalletTotalAmont() getWalletTotalAmont() { let amount = 0; this.http.post<any>(`${this.generalService.apiBaseUrl}api/wallet/getWalletTotal ...

The TLS connection could not be established as the client network socket disconnected prematurely

While attempting to run npm install on an Angular 5 dotnetcore project that I pulled down from source tree, everything was running smoothly on my work machine. However, when I tried to do the initial npm install on my home machine, I encountered the foll ...

"Experiencing sluggish performance with VSCode while using TypeScript and Styled Components

My experience with vscode's type-checking is frustratingly slow, especially when I am using styled components. I have tried searching for a solution multiple times, but have only come across similar issues on GitHub. I attempted to read and understa ...

MAJOR UPDATE: webpack versions before 5 previously contained polyfills for node.js specifically for 'timers-browserify'

Hey there, I'm encountering the error message below: ./node_modules/xml2js/lib/parser.js:38:17-47 - Error: Module not found: Error: Can't resolve 'timers' in '/Users/differentname/Desktop/workfiles/webdoc/ngx-admin-1/node_modules/x ...