title: Angular, Lazy Loading, Inter-Module Dependencies, best practice
body: <p>I have following example application layout:</p>
  
  <pre><code>app.module
   |
   |-- dashboard.module                 (lazy loaded)
   |-- dashboard-routing.module         (imported by dashboard.module)
   |-- dashboard.service                (provided by dashboard.module)
   |-- dashboard.component              (depends on dashboard.service)
   |
   |-- notifications.module             (lazy loaded)
   |-- notifications-routing.module     (imported by notifications.module)
   |-- notifications.service            (provided by notifications.module)
   |-- notifications.component          (depends on notifications.service)
   |
   |-- my-notifications-dashboard-widget.component &lt;- this should be added
   |
   |-- ...
  </code></pre>
  
  <p>Every module (<code>dashboard</code>, <code>notifications</code>, <code>...</code>) is getting lazy loaded.</p>
  
  <p>Now I'd like to add some <code>MyNotificationsDashboardWidgetComponent</code>, which depends on the <code>notifications.service</code>. This widget then should get injected within the <code>dashboard.service</code>.</p>
  
  <p>This works well, as long as the provided WidgetComponent is inside the <code>dashboard.module</code>. But if I put the component within the lazy loaded <code>notifications.module</code>, it of course doesn't work.</p>
  
  <p>Now I'd like to know, how to solve this in a good, <strong>module oriented</strong> way. </p>
  
  <p>My requirements:</p>
  
  <ul>
  <li><p>There should only be <strong>one</strong> <code>notifications.service</code>, which should be used by <code>notifications.component</code> and <code>my-notifications-dashboard-widget.component</code>.</p></li>
  <li><p>The big modules (<code>dashboard</code>, <code>notifications</code>) should be lazy loaded.</p></li>
  <li><p>The <code>dashboard.module</code> shouldn't know anything about the <code>notifications.module</code> and / or the <code>my-notifications-dashboard-widget.component</code>.</p></li>
  </ul>
  
  <hr>
  
  <h2>Ideas:</h2>
  
  <p>I guess, that I need some eager loaded module, which contains <code>my-notifications-dashboard-widget.component</code>. So that this component and its provider is known <strong>before</strong> the <code>dashboard.module</code> is getting loaded.</p>
  
  <p>But then I'd have to put the <code>notifications.service</code> in this module, too, I guess?!</p>
  
  <hr>
  
  <h2>Some code snippets of the current (non-working) approach:</h2>
  
  <p>dashboard.service:</p>
  
  <pre><code>@Injectable()
  export class DashboardService {
      constructor(@Inject(DASHBOARD_WIDGET) widgets) {
          // inject all provided widgets
          widgets.forEach(w =&gt; console.log(w.type));
      }
  }
  </code></pre>
  
  <p>notifications.module:</p>
  
  <pre><code>@NgModule({
      imports: [ NotificationsRoutingModule ],
      declarations: [ NotificationsComponent ],
      providers: [
          NotificationsService,
          // this is currently not working, because of lazy loading
          {
              provide: DASHBOARD_WIDGET,
              useValue: {
                  type: 'my-notifications'
                  component: MyNotificationsDashboardWidgetComponent
              },
              multi: true
          }
      ],
      entryComponents: [ MyNotificationsDashboardWidgetComponent ]
  })
  export class NotificationsModule { }
  </code></pre>
  
  <p>notifications.component:</p>
  
  <pre><code>@Component({ ... })
  export class NotificationsComponent {
      constructor(service: NotificationsService) { ... }
  }
  </code></pre>
  
  <p>my-notifications-dashboard-widget.component:</p>
  
  <pre><code>@Component({ ... })
  export class MyNotificationsDashboardWidgetComponent {
      constructor(service: NotificationsService) { ... }
  }
  </code></pre>