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

Question

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?

Lallygag

Answer 1

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';

Lallygag

How would you include MaterialModule in this list of export statements ? Let me answer my question: export * from './lib/material.module'; – Pyrrho

Exporting module is not enough to use the internally exported components ?? – Outrelief

@NandaKishoreAllu no, actually you need to add them in public_api to make them available. – Lallygag

If you are not using public_api.ts then editing index.ts works just as well. – Ternary

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? – Kibe

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? – Dingus

I only have a public.ts in src/ , after adding export * from "../src/collections/message/components/message" it errors: ERROR: Could not resolve '../src/collections/message/components/message' from dist/esm2015/public.js – Diabolic

Answer 2

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}}';

Smollett

Answer 3

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.

Chak

such a pain if you have a bunch of directives or components in your library but I guess is a good evil :) – Jittery

Answer 4

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.

Sindhi

I think you saved me hours of searching for the cause of this problem, which was the default exports :) – Patchy