106

I upgraded all my angular library to angular 9.0.0 using ng update and when I try to build them I got below error.

Error:

Unsupported private class SomeComponent. This class is visible to consumers via SomeModule -> SomeComponent, but is not exported from the top-level library entrypoint.

Anyone solved this error?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Aniruddha Das
  • 20,520
  • 23
  • 96
  • 132

4 Answers4

247

This error happens if any component is exported in NgModuleand not included in your public_api.ts, Angular 9 will throw an error now.

This error was not coming in Angular 8 but after upgrading to Angular 9 it started showing.

If you exported any service, module or component, etc in NgModule make sure to include them in public_api.ts or else angular 9 will throw error now.

Fix: add your component to the public_api.ts

export * from './lib/components/some-me/some-me.component';
DJClayworth
  • 26,349
  • 9
  • 53
  • 79
Aniruddha Das
  • 20,520
  • 23
  • 96
  • 132
  • How would you include MaterialModule in this list of export statements ? Let me answer my question: `export * from './lib/material.module';` – Stephane May 05 '20 at 07:13
  • 6
    Exporting module is not enough to use the internally exported components ?? – Nanda Kishore Allu Jun 10 '20 at 05:54
  • 2
    @NandaKishoreAllu no, actually you need to add them in public_api to make them available. – Aniruddha Das Jun 10 '20 at 17:01
  • 6
    If you are not using public_api.ts then editing index.ts works just as well. – DJClayworth Jun 30 '21 at 18:55
  • 2
    Can someone perhaps explain this situation: I have my component in a module and this module is being exported in public-api.ts, but when I try and do ng build I get the afforementioned message. Any guesses as to why this is happening? – Nekvin Oct 12 '21 at 09:28
  • 1
    Does this affect to both eager and lazy loaded modules? I assume only to eager, otherwise all internal components should be exported in public-api as they will be imported transitively in some part of the application, isn't it? – Dani P. Nov 15 '21 at 23:01
12

I was struggling with the same issue today.

My prerequisites:

  • I work on an Angular 11 library type project;
  • I have added a new directive;
  • I got an error as above when tried to add my directive to module exports.

Fix:

  • I have added file export to index.ts file:

export * from './just/a/relative/path/to/the/directive/{{myDirectiveFile}}';

Viktoriia Shchutska
  • 121
  • 1
  • 2
4

I ran into the same issue. I couldn't remove the default keyword, as Storybook required me to have that. I ended up fixing it by changing this:

export * from './lib/components/some-me/some-me.component';

... to this:

export { default as SomeComponent } from './lib/components/some-me/some-me.component';

in the public_api.ts file.

ClintG
  • 41
  • 2
  • such a pain if you have a bunch of directives or components in your library but I guess is a good evil :) – Gautam Jul 13 '23 at 12:49
1

This error happened to me because I used the default keyword to export my component :

@Component({
  selector: 'lib-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
})
export default class FormComponent implements OnInit {
    // ...
}

The use of this keyword was suggested by my Linter and allows to write imports as import FormComponent from './form.component'; instead of import { FormComponent } from './form.component';

However this does not seem to work well along public-api.ts. The solution for me was to remove the default keyword and change all imports.

Josef
  • 2,869
  • 2
  • 22
  • 23
jprissi
  • 19
  • 5
  • 1
    I think you saved me hours of searching for the cause of this problem, which was the default exports :) – paddotk Aug 18 '22 at 13:11