title: Angular 4 : how to pass an argument to a Service provided in a module file
body: <p>I'm calling to you for help on what method to use here : I have tested many things to solve my problem and I have at least 4 working solutions, but I don't know which one(s) would be the best and if some of them work only because of a side effect of something else I did and should not be used...</p>
  
  <p>I couldn't find anything in the documentation to point me to one of these solutions (or another one)</p>
  
  <p><strong>First, here's my situation</strong> : I'm building an app that connects to an API for data and builds different sections, each containing dataviz.</p>
  
  <p>I built the sections of the site to be modules, but they share a service named DataService (each of these modules will use the DataService to get and process the data).</p>
  
  <p>My DataService needs a config file with a number of options that are specific to each section and stored in it's own folder.</p>
  
  <p>So I need to provide DataService separately for each section, in the providers section of the module.ts file, and it seemed like good practice to avoid copying DataService to each module...</p>
  
  <p>So the architecture of the files would be :</p>
  
  <pre><code>--Dashboard module
  ----data.service.ts
  ----Section1 module
  ------Section1 config file
  ----Section2 module
  ------Section2 config file
  </code></pre>
  
  <p>I tried multiple things that all seem to work in the section module file :</p>
  
  <p><strong>Solution 1 : injection</strong></p>
  
  <p>(I couldn't get the injection to work without quotation marks, even if I didn't see this anywhere)</p>
  
  <p>Module file :</p>
  
  <pre><code>import { DataService } from '../services/data.service';
  import viewConfig from './view.config.json';
  
  @NgModule({
      imports: [ ... ],
      declarations: [ ... ],
      providers: [
          { provide: 'VIEW_CONFIG', useValue: viewConfig },
          DataService,
      ]})
     export class Section1Module { }
  </code></pre>
  
  <p>Section file : </p>
  
  <pre><code>@Injectable()
  export class DataService {
  
      constructor(@Inject('VIEW_CONFIG') private viewConfig : any) {}
  
  }
  </code></pre>
  
  <p><s><strong>Solution 2 : factory provider</strong></s></p>
  
  <p><strong><em>Not working after ng serve reboot (see update)</em></strong></p>
  
  <p><s>
  Inspired from <a href="https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#factory-provider" rel="noreferrer">https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#factory-provider</a></p>
  
  <p>Module file :</p>
  
  <pre><code>import { DataService } from '../services/data.service';
  import viewConfig from './view.config.json';
  
  export let VIEW_CONFIG = new InjectionToken&lt;any&gt;('');
  let dataServiceFactory = (configObject):DataService =&gt; {
      return new DataService(configObject)
  }
  
  @NgModule({
      imports: [ ... ],
      declarations: [ ... ],
      providers: [
          { provide: VIEW_CONFIG, useValue: viewConfig },
          {
              provide : DataService,
              useFactory : dataServiceFactory,
              deps : [VIEW_CONFIG]
          },
      ]})
     export class Section1Module { }
  </code></pre>
  
  <p>Section file : </p>
  
  <pre><code>@Injectable()
  export class DataService {
  
      constructor(private viewConfig : any) {}
  
  }
  </code></pre>
  
  <p></s>
  <s>
  <strong>Solution 3 : custom provider with direct instanciation</strong>
  </s></p>
  
  <p><strong><em>Not working after ng serve reboot (see update)</em></strong></p>
  
  <p><s>
  Module file :</p>
  
  <pre><code>import { DataService } from '../services/data.service';
  import viewConfig from './view.config.json';
  
  @NgModule({
      imports: [ ... ],
      declarations: [ ... ],
      providers: [
          { provide: DataService, useValue : new DataService(viewConfig) },
      ]})
     export class Section1Module { }
  </code></pre>
  
  <p>Section file : </p>
  
  <pre><code>@Injectable()
  export class DataService {
  
      constructor(private viewConfig : any) {}
  
  }
  </code></pre>
  
  <p></s>
  <s>
  <strong>Solution 4 : custom provider with factory</strong>
  </s></p>
  
  <p><strong><em>Not working after ng serve reboot (see update)</em></strong></p>
  
  <p><s>
  Very similar to Solution 3...</p>
  
  <p>Module file :</p>
  
  <pre><code>import { DataService } from '../services/data.service';
  import viewConfig from './view.config.json';
  
  let dataServiceFactory = (configObject) =&gt; { return new DataService(configObject) }
  
  @NgModule({
      imports: [ ... ],
      declarations: [ ... ],
      providers: [
           { provide: DataService, useValue : dataServiceFactory(viewConfig) }
      ]})
     export class Section1Module { }
  </code></pre>
  
  <p>Section file : </p>
  
  <pre><code>@Injectable()
  export class DataService {
  
      constructor(private viewConfig : any) {}
  
  }
  </code></pre>
  
  <p></s></p>
  
  <p><strong>Solution 5</strong>
  Use of a factory exported from the service file AND and injection token</p>
  
  <p>Module file :</p>
  
  <pre><code>export const VIEW_CONFIG = new InjectionToken&lt;any&gt;('');
  
   @NgModule({
      imports: [ ... ],
      declarations: [ ... ],
      providers: [
           { provide: VIEW_CONFIG, useValue: viewConfig },
           { provide : DataService,
             useFactory: dataServiceFactory,
             deps : [VIEW_CONFIG] }
      ]})
     export class Section1Module { }
  </code></pre>
  
  <p>Section file : </p>
  
  <pre><code>@Injectable()
  export class DataService {
      constructor(private viewConfig : any) {}
  }
  
  export function dataServiceFactory(configObject) {
      return new DataService(configObject);
  }
  </code></pre>
  
  <hr>
  
  <p>I'm open to any criticism, idea, new lead of any kind on "What would be the right solution ?" or even "Is the right solution among these ones ?"</p>
  
  <p>Thanks a lot ! :D</p>
  
  <hr>
  
  <p><strong>UPDATE</strong>
  At one point, I realised my Angular-CLI was behaving strangely, and that some of these methods weren't working if I killed my local server and did an "ng serve".
  What is even stranger is, it doesn't work juste after killing the CLI local server and rebooting it, but next time I save a file and the CLI recompiles, it works fine...</p>
  
  <p><strong>Solution 1</strong> : still working</p>
  
  <p><strong>Solution 2 / Solution 3</strong> : fails with error :</p>
  
  <pre><code>Error encountered resolving symbol values statically. Calling function 
  'DataService', function calls are not supported. Consider replacing the 
  function or lambda with a reference to an exported function
  </code></pre>
  
  <p><strong>Solution 4</strong> : fails with error:</p>
  
  <pre><code>Error encountered resolving symbol values statically. Reference to a non-exported function
  </code></pre>
  
  <p><strong>Added solution 5</strong></p>