module declares component locally, but it is not exported

earlyBirdDev picture earlyBirdDev · Mar 18, 2020 · Viewed 17k times · Source

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.

Answer

Arun205 picture Arun205 · Jul 11, 2020

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.