Importing Shared Angular Module - Error Module declares component locally, but is not exported

Question

I'm trying to create a simple feature module and my imports are failing and I don't know why. Below is the important sections of my feature module

@NgModule({
  declarations: [
    ProducerLookupComponent,
    ProducerAddComponent
  ]
  exports: [
    ProducerLookupComponent,
    ProducerAddComponent
  ]
})
export class ProducerModule { }

I import the ProducerModule in my app module. Then I want to use ProducerLookupComponent and ProducerAddComponent as templates for a dialog, so I'm not adding their selectors in another html template anywhere. This is the only thing that seems to be different than the basic tutorials on creating feature modules. I've created other feature modules where I just use components via their selectors just fine.

So in a ts file where I create the dialog, I have code like this

import { ProducerLookupComponent, ProducerAddComponent} from '../producer/producer.module';

There I get then is

ERROR in src/app/application-initiation-fio/application-initiation-fio.component.ts:8:10 - error TS2459: Module '"D:/code/ade/client/src/app/producer/producer.module"' declares 'ProducerLookupComponent' locally, but it is not exported.

Note I can 'fix' the error by adding export statements in my Producer Module like this

export{ ProducerLookupComponent } from './producer-lookup/producer-lookup.component';
export{ ProducerAddComponent } from './producer-add/producer-add.component';

But that seems redundant.

Any help would be appreciated, thanks!

did you check out this answer https://stackoverflow.com/a/60740893/10310278 — cvekaso, May 11 '20 at 18:48
Yes. Doesn't appear to be the same issue though. Not exactly the same, anyway. — jeff.eynon, May 11 '20 at 18:58

score 3 · Answer 1 · answered Jul 11 '20 at 18:30

It is not redundant to add export in feature module. The export in the header and the exports property in NgModule decorator solves different purposes.

The exports property in NgModule decorator is for Angular. Angular creates a template for these exported components and deliver that template wherever it finds that selector. In this process, there is no typescript file dependency between feature and main modules. So TSC is not bothered.

The export in the header is for Typescript. Whenever import is issued for a Typescript class(Module or Component), there should be a corresponding export for that class. If TSC is not able to find the exported class, it will throw this error.

Importing Shared Angular Module - Error Module declares component locally, but is not exported

1 Answers1