title: How to pass injection token to nested service using SCAM approach (Single Component Angular Module)?
body: <p>I have been playing with <strong>SCAM</strong> (Single Component Angular Modules) approach and I am facing a problem passing <strong>injection token</strong> from parent to child module.</p>
  <p>I have a <strong>ScamService</strong> with <strong>httpClient</strong> and <strong>baseUrl</strong> injected:</p>
  <pre><code>import { HttpClient, HttpClientModule } from '@angular/common/http';
  import { Injectable, Inject, NgModule, ModuleWithProviders } from '@angular/core';
  import { BASE_URL } from './injection.tokens';
  
  @Injectable()
  export class ScamService {
    constructor( @Inject(BASE_URL) private baseUrl, private httpClient: HttpClient ) {}
  
    public getData() {
      return this.httpClient.get(`${this.baseUrl}/rest-of-endpoint`);
    }
  }
  
  @NgModule({
    imports: [HttpClientModule]
  })
  export class ScamServiceModule {
    public static forRoot(baseUrl): ModuleWithProviders&lt;ScamServiceModule&gt; {
      return {
        ngModule: ScamServiceModule,
        providers: [{
            provide: BASE_URL,
            useValue: baseUrl
        }]
      };
    }
  }
  </code></pre>
  <p>To provide <strong>BASE_URL</strong> token to a module I need to create static method that returns <strong>ModuleWithProviders</strong>. There i am able to assign a value to the token. That's fine.</p>
  <p>Next, I want to use the service in a component, so I am importing <strong>ScamServiceModule</strong> into <strong>ScamComponentModule</strong>:</p>
  <pre><code>import { Component, ModuleWithProviders, NgModule } from '@angular/core';
  import { ScamService, ScamServiceModule } from './scam.service';
  
  @Component({//...})
  export class ScamComponent {
    constructor(private scamService: ScamService) {}
  }
  
  @NgModule({
    imports: [
      ScamServiceModule.forRoot(
        `The url I would like to pass is not in the environments, 
         I need to take it from forRoot of ScamComponentModule`
      )
    ]
  })
  export class ScamComponentModule {
    public static forRoot(baseUrl): ModuleWithProviders&lt;ScamComponentModule&gt; {
      // how to tell ScamServiceModule what the value of baseUrl is?
    }
  }
  </code></pre>
  <p>Now I need to provide base url to it. So I should call <strong>ScamServiceModule.forRoot('some-url')</strong>. That would be fine If I knew the url on the component level.</p>
  <p>But the url needs to be passed through <strong>forRoot</strong> method of <strong>ScamComponentModule</strong>.</p>
  <p>Do you have any suggestion on how to pass the baseUrl through?</p>
  <p>Thank you in advance!</p>