Specifying different imports for Angular Module if it is exported as a custom element

Question

I've got a module which I need to use in two places. One inside an Angular application and another as a custom element on its own for use in other places where we are dropping into legacy systems.

The issue arises due to AngularElements requiring the BrowserModule if it is a root component.

Is there a way to conditionally import this based on whether it is being called as a custom element or not?

I also tried to export as multiple modules using the forRoot and forChild approach. With a shared module like so:

@NgModule()
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: RootModule,
      providers
    }
  }
  static forChild(): ModuleWithProviders {
    return {
      ngModule: ChildModule,
      providers
    }
  }
}

Unfortunately, this throws errors as the components are then being imported twice.

Are you asking how to conditionally import those modules with a known condition or is the question including to find a way how to distinguish between those two? — Erbsenkoenig, Aug 01 '19 at 06:39
Hi @Erbsenkoenig, I am looking to conditionally add the BrowserModule if SharedModule is being called as the main Module instead of a child module — AndyD, Aug 04 '19 at 19:41

score 0 · Answer 1 · answered Aug 05 '19 at 12:15

0

I guess your question is kind of a duplicate of this: Load ngModule and its components based on conditional in Angular

You can use the accepted answer of this thread, but import the BrowserModule optionally instead of MyModule.

answered Aug 05 '19 at 12:15

SparkFountain

2,110
15
35

score 0 · Answer 2 · answered Aug 07 '19 at 19:02

Is building a library a possible solution? It says "If you find that you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library." A library typically includes reusable code that defines components, services, and other Angular artifacts (pipes, directives, and so on) that you simply import into a project.

You can create a library like this:

ng generate library my-lib

Specifying different imports for Angular Module if it is exported as a custom element

2 Answers2