6
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.

4
  • Can you post the implementation of SpinnerComponent? There are requirements for an entry component that the component is not meeting.
    – dook
    Jul 4, 2018 at 1: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 gist.github.com/lars-erik/df41d1d889264b3ff2c1de1826ca936d
    – Lars-Erik
    Jul 11, 2018 at 9:37
  • Did you ever find a solution for this? I have the exact same issue.
    – MikeOne
    Aug 28, 2018 at 10:05
  • I didn't also not working on Angular these days... will update once I have any answer. Aug 28, 2018 at 10:06

5 Answers 5

1

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 { }
0

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

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

0

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.

0
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]
  })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.