title: How to override services injected to angular component
body: <p>We're building a cms driven application framework with Angular. We deliver multiple packages that can be used by customers to further customise the ui or logic. Components to that reason will delegate their logic to a service, with the intend customers can provide a custom service (we're avoiding component inheritance).</p>
  
  <p>The components are dynamically being placed and are initialised with unique data set, holding the CMS data. The provided services will inherit this data from the component injector. This works great, however, when a custom service is provided (using <code>InjectionToken</code>), we face 2 problems:</p>
  
  <ol>
  <li>The service is no longer a non-singleton, multiple component instances will be provided with the same custom service</li>
  <li>The service will no longer inherit the data value from the component as it's injected in a different scope</li>
  </ol>
  
  <p>Anyone else got into a similar architectural challenge?</p>