Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

module declares component locally, but it is not exported

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.

like image 357
earlyBirdDev Avatar asked Mar 18 '20 13:03

earlyBirdDev


People also ask

Which has no exported member model?

The error "Module has no exported member" occurs when we try to import a member that doesn't exist in the specified module. To solve the error, make sure the module exports the specific member and you haven't mistyped the name or mistaken named for default import.

Does ts not have default export?

The "Module has no default export" error occurs when we try to import as default from a module that doesn't have a default export. To solve the error make sure the module has a named export and wrap the import in curly braces, e.g. import {myFunction} from './myModule' .

How do I export a function in TypeScript?

Use named exports to export a function in TypeScript, e.g. export function sum() {} . The exported function can be imported by using a named import as import {sum} from './another-file' . You can use as many named exports as necessary in a single file.

What is export type in TypeScript?

TypeScript supports export = to model the traditional CommonJS and AMD workflow. The export = syntax specifies a single object that is exported from the module. This can be a class, interface, namespace, function, or enum.

Do I need to import the component in the shared module?

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: [ ...

How do I import a typescript class into another module?

If you want to import the Typescript class in other modules, then you have to export the class in the feature module. 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.

What is the difference between ngmodule header and ngmodule export?

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.


1 Answers

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.

like image 84
Arun205 Avatar answered Sep 16 '22 19:09

Arun205