Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 : export component on a module and import and use it inside a module

I have a feature module called CustomerInfoModule which exports a CustomerInfoComponent. see below.

import {NgModule} from '@angular/core'
import {RouterModule}  from '@angular/router'

import {CustomerInfoComponent} from './customer-info.component'

@NgModule({
declarations:[CustomerInfoComponent],
exports:[CustomerInfoComponent]
})
export class CustomerInfoModule{
}

I want to import and use this CustomerInfoComponent inside MissedCollectionsComponent. I am getting typescript error

'.module"' has no exported member 'CustomerInfoComponent'

.

import {NgModule} from '@angular/core'
import {RouterModule} from '@angular/router'

import {MissedCollectionsComponent} from './missed-collections.component'

import {CustomerInfoComponent} from '../shared/customer/customer-info.module'

@NgModule({
imports:[RouterModule.forChild([
        {path:'missedcollection',component:MissedCollectionsComponent},
        {path:'missedcollection/customerinfo',component:CustomerInfoComponent}
    ]),
    CustomerInfoModule],
declarations:[],
exports:[]
})
export class MissedCollectionsModule{

}

As per the Angular2 documentation it says:

'We export the ContactComponent so other modules that import the ContactModule can include it in their component templates.' link

Is it not logical to import componets from a module and use it inside another module. Am I wrong thinking that/or missing someting?

like image 482
Prabash B Avatar asked Jan 31 '17 15:01

Prabash B


People also ask

Can we have module inside module in Angular?

Sharing moduleslinkYou can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application. Notice the following: It imports the CommonModule because the module's component needs common directives.

Can we import module in component Angular?

You can import it directly or from another NgModule that re-exports it. Import FormsModule from @angular/forms if your components have [(ngModel)] two-way binding expressions. Import shared and feature modules when this module's components incorporate their components, directives, and pipes.


1 Answers

because you import from module file, you could do something like this.

customer-info.module.ts

import {CustomerInfoComponent} from './customer-info.component';
export {CustomerInfoComponent};
like image 141
Tiep Phan Avatar answered Sep 19 '22 07:09

Tiep Phan