title: Sharing a component between multiple modules, without app.module.ts file
body: <p>I have a component MenuComponent which I want to use in multiple modules.</p>
  
  <p>Here is the first module:</p>
  
  <pre><code>@NgModule({
    declarations: [MenuComponent],
  imports: [SharedModule],
  })
  export class TestModule implements DoBootstrap {
    constructor(private injector: Injector) { }
  
    ngDoBootstrap() {
      const ngElement = createCustomElement(TestComponent, { injector: this.injector, });
      customElements.get('my-test') || customElements.define('my-test', ngElement);
    }
  }
  </code></pre>
  
  <p>Here is the second:</p>
  
  <pre><code>@NgModule({
    declarations: [MenuComponent],
  imports: [SharedModule],
  })
  export class Test2Module implements DoBootstrap {
    constructor(private injector: Injector) { }
  
    ngDoBootstrap() {
      const ngElement = createCustomElement(TestComponent, { injector: this.injector, });
      customElements.get('my-test2') || customElements.define('my-test2', ngElement);
    }
  }
  </code></pre>
  
  <p>They are almost the same, pretty simple. I created a SharedModule:</p>
  
  <pre><code>@NgModule({
    imports: [MenuComponent],
    declarations: [ MenuComponent ],
    exports: [ MenuComponent
    ],
  })
  export class SharedModule {}
  </code></pre>
  
  <p>I don't have an app.module.ts file, instead I have a module for each of the elements and I build each of them separately. How can I use the MenuComponent in multiple modules?</p>