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 stackoverflow.com/a/60740893/10310278 — cvekaso
– cvekaso, Commented May 11, 2020 at 18:48
Yes. Doesn't appear to be the same issue though. Not exactly the same, anyway. — jeff.eynon
– jeff.eynon, Commented May 11, 2020 at 18:58

Arun205 · Accepted Answer · 2020-07-11 18:30:59Z

3

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.

answered Jul 11, 2020 at 18:30

Arun205

4596 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related