Component cannot be used as an entry component

Question

import { SpinnerComponent, ExternalLibrary } from 'external.library'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, ExternalLibrary
  ],
  bootstrap: [AppComponent]
  , entryComponents: [SpinnerComponent]
})

Above is my code to specify entryComponent to a module. also this SpinnerComponent is from an external module which is ExternalModule.

Webpack giving error:

ERROR in SpinnerComponent cannot be used as an entry component.

Is belonging to the same module a requirement for a component to appear in entryComponents property list?

As far as I can go through the official definitions there is no such pre requisite specified for a component before appearing in entryComponent property.

Can you post the implementation of `SpinnerComponent`? There are requirements for an entry component that the component is not meeting. — dook, Jul 04 '18 at 01:01
@dook Do you have any details on those requirements? I'm struggling with the same for module components created with `ViewContainerRef.createComponent`. Some as simple as this https://gist.github.com/lars-erik/df41d1d889264b3ff2c1de1826ca936d — Lars-Erik, Jul 11 '18 at 09:37
Did you ever find a solution for this? I have the exact same issue. — MikeOne, Aug 28 '18 at 10:05
I didn't also not working on Angular these days... will update once I have any answer. — Ashutosh Singh, Aug 28 '18 at 10:06

score 1 · Answer 1 · answered Sep 02 '18 at 21:11

I was having the same issue. What fixed it for me was adding the component to the entryComponents of a module in my external library.

In your case that would mean updating the ExternalLibrary NgModule to include SpinnerComponent as an entry component instead of the app that's using the library.

@NgModule({
    ...
    entryComponents: [SpinnerComponent]
    ...
})
export class ExternalLibrary { }

dummdidumm · Answer 2 · 2019-10-02T11:14:04.747

In my case the error still persisted even after adding it to entryComponents inside the library module. Turned out it was because of my index.ts file: Inside the folder of the module I had an index.ts file which was re-exporting the module and its components. Inside public_api.ts I used the export from the index.ts, so it looked something like this:

...
export * from './lib/shell';

Somehow Angular does not like index.ts files inside libraries, and I got the error (language service was also throwing errors, not recognizing the tags). Changing index.ts to public-api.ts fixed it:

...
export * from './lib/shell/public-api';

score 0 · Answer 3 · answered Jan 08 '20 at 18:55

you are missing the dynamic component from declarations

import { SpinnerComponent, ExternalLibrary } from 'external.library'
@NgModule({
  declarations: [
    AppComponent, SpinnerComponent
  ],
  imports: [
    BrowserModule, ExternalLibrary
  ],
  bootstrap: [AppComponent]
  , entryComponents: [SpinnerComponent]
})

hope it helps

score 0 · Answer 4 · answered Jun 05 '20 at 09:10

In my case, the problem was that the entry component was declared in an Angular Library, but, it was redeclared in diferent lacy load modules (as entry component again), cleaning the declaration in the lacy loads module and keeping only the declaration inside the library, works.

Hope it helps.

score 0 · Answer 5 · answered Jun 08 '22 at 20:33

Hello @Ashutosh,

Try removing this line:

~~entryComponents: [SpinnerComponent]~~

Reshuffle items by adding SpinnerComponent to declarations, like so:

import { SpinnerComponent, ExternalLibrary } from 'external.library'
  @NgModule({
   declarations: [AppComponent, SpinnerComponent],
   imports: [BrowserModule, ExternalLibrary],
   bootstrap: [AppComponent]
  })

Component cannot be used as an entry component

5 Answers5

Hello @Ashutosh,