CODEWITHSUNDEEP
angular
Raphael
Raphael

Reputation: 1812

Error TS2724 module has no exported member, When tried to import pipe in component from package

I have project structure like 3 angular projects(external,internal,common) in which common is used as a shared module and packaged using ng-package and used in other 2 projects.common will have resusable components,pipes and services which we will use internal and external projects.

The problem here is I have a pipe(documentsFilter) in common shared module. And I am using this in my internal application like the below html component tag.And I am able to pipe from the html and pipe is getting triggered and performed correctly. But When I try to use this same pipe in the corresponding component.ts file I am getting -common"' has no exported member 'DocumentsFilterPipe'.

shared.Module.ts

import { DocumentsFilterPipe } from '../pipes/documents-filter.pipe';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ButtonsModule
  ],
  declarations: [
    DocumentsFilterPipe
  ],
  exports: [
    DocumentsFilterPipe
  ]
})
export class SharedModule {
}

I have angular component like below in which I am using pipe(documentsFilter).

<documents-filter [documents]="filteredDocuments() | documentsFilter: documentFilter"></documents-filter>

Internal module.ts 

import {
  BandaroleService,
  ButtonsModule,
  SharedModule,
  DocumentsFilterComponent
} from 'common';


@NgModule({
  declarations: [
    AppComponent,
    DocumentsFilterComponent
  ],
  imports: [
    ButtonsModule,
    BrowserModule,
    DirectiveModule,
    SharedModule,
    FormsModule,
  ],
  providers: [
    SharedDataService
  ],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {
}

Component file

    import {
      Constants,
      SharedModule,
      Column,
      CreditOverviewSortingService
    } from 'common';
@Component({
  selector: 'documents',
  templateUrl: './documents.component.html',
  styleUrls: ['./documents.component.scss'],
})
export class DocumentsComponent implements OnInit, OnDestroy, AfterViewInit {

   constructor(public constants: Constants,
              private documentService: DocumentInternalService,
              private documentsFilterPipe: DocumentsFilterPipe;
  }

EDIT1:

In the component when I import DocumentsFilterPipe like this

import {
  Constants,
  CreditCase,
  DocumentsFilterPipe,
} from 'common';

getting error like common"' has no exported member 'DocumentsFilterPipe'

In the component when I import SharedModule like this

import {
  Constants,
  CreditCase,
  SharedModule,
} from 'common';

getting error like error TS2304: Cannot find name 'DocumentsFilterPipe'

Upvotes: 0

Views: 5954

Answers (1)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38837

The issue is that you have not exported DocumentsFilterPipe from public-api.ts of the common library. Having DocumentsFilterPipe in imports/exports of SharedModule is not enough to be able to import it and use it directly in your projects using common library. Add something along the lines of the following to your public-api.ts:

export * from './path/to/documents-filter.pipe';

Hopefully that helps!

Upvotes: 2

Related Questions