CODEWITHSUNDEEP
angulartypescriptmodulecomponents
Prabash B
Prabash B

Reputation: 340

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?

Upvotes: 16

Views: 35470

Answers (2)

david_lira
david_lira

Reputation: 11

I understand Prabash B wants to make "CustomerInfoComponent encapsulated in the CustomerInfoModule" (as stated in one of his responses to the 1st answer), and therefore does not want to import the file component directly in MissingCollectionsModule.

However, there is a difference between Javascript Modules and NgModules as presented in the Angular documentation: https://angular.io/guide/ngmodule-vs-jsmodule.

The import statements at the top of the file are related to Javascript Modules, whereas the import, export, declarations and provider statements within the @NgModule decorator as related to NgModules.

Therefore it is perfectly fine to import the component directly in MissingCollectionsModule.

Upvotes: 0

Tiep Phan
Tiep Phan

Reputation: 12596

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

customer-info.module.ts

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

Upvotes: 4

Related Questions