module declares component locally, but it is not exported

Question

i have created a shared module and declared & exported the component i need 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 have imported the shared module.

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

in one of the components of the other module i imported the component from shared module, but i receive the below error

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

module declares component locally, but it is not exported.

Mantooth

You're importing it into another module, but are you registering it there? – Agentival

i have it in the imports array, when you say registering you mean having it in imports array of module? – Mantooth

yes, you should share some more code. – Agentival

updated question/code – Mantooth

Answer 1

You do not need to import the component again, only import the SharedModule in other modules and feel free to use the component declared && exported in the SharedModule.

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

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

Try to replicate this setup in a Stackblitz or share access to the repository in order to allow us debug your issue and provide you a solution.

EDITED>>

Since you are trying to bootstrap the Component in the build process of your Module. Then it is possible that you need to use the EntryComponent to make the component itself to be provideed from bootstrap of the module loaded.

See it in code:

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

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

For more information, checkout: https://codinglatte.com/posts/angular/entry-components-angular/

Ebberta

thanks rusian, i understand that i need not import component when using it in DOM as a selector. but would need to use it to display in ionic modal. when i remove the import statement . i receive the below Cannot find name 'AddtimeComponent'. – Mantooth

I think I understand what is happening to you, in order to use it in a modal you may need to use it in the EntryComponent, make sure you import/export the component itself from the SharedModule but also add the component in the EntryComponent on the module you are going to use. You can find more information about EntryComponents clicking here – Ebberta

Check my edited answer above. Hope that it helps to you! – Ebberta

thanks Rusian, just a quick question. i can import AddtimeComponent very similarly from the page/component. i am trying to load it from the Shared Module. could you explain whats underneath here. cant we import from the shared module. doing this way defeats the purpose right. – Mantooth

Honestly that very depends on how is your app architecture planned. Since you are using SharedModule logic you can import it and use its components in other modules. Keep in mind that declarations may only be in just one Module at the time. If you face any issues, please try to reproduce this in a clean repository right in the Stackblitz or Github. – Ebberta

Answer 2

You need not import AddtimeComponent in the main module. You have to export it in SharedModule like below.

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

The export property in NgModule decorator and export in header are different. The export property in NgModule is for Angular compiler and export in header is for Typescript compiler.

If you plan to use only selector, then mention in NgModule decorator is enough. If you want to import the Typescript class in other modules, then you have to export the class in the feature module.

Hydrotherapy