title: Service not found when indirectly referenced, works when referenced directly - Angular2
body: <p><strong>TL;DR</strong> -> Why does referencing the service directly work, but referencing via a bucket file result in a "undefined" error?</p>
  
  <p>I receive the following error when I try to inject a service that is referenced via a "barrel" index.ts file.</p>
  
  <pre><code>platform-browser.umd.js:2311 EXCEPTION: TypeError: Cannot read property 'parameters' of undefined
  </code></pre>
  
  <p>The project is quite large, but I've simplified the scenario to just what produces the given error. This reproduces whether I reference the Service via a sub-component or the <code>foo.component</code> - I just hit it first with the sub-component during my debugging.</p>
  
  <p>Folder structure is like so:</p>
  
  <pre><code>-/app
  |-/foo
  ||-/foo-A
  |||-/foo-A.component.ts
  |||-/index.ts
  ||-/foo.component.ts
  ||-/foo.service.ts
  ||-/index.ts
  |-/app.component.ts
  |-/main.ts
  </code></pre>
  
  <p>Service uses <code>@Injectable</code>:</p>
  
  <pre><code>// foo.service.ts
  import { Injectable } from '@angular/core';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  
  @Injectable()
  export class FooService{
    constructor(private http: Http) { }
  }
  </code></pre>
  
  <p>Service is exposed via barrel <code>app/foo/index.ts</code> file:</p>
  
  <pre><code>export * from './foo.service'
  export * from './foo.component'
  </code></pre>
  
  <p>Component (FooA) references via the <code>index.ts</code> file</p>
  
  <pre><code>// foo-A.component.ts - **broken**
  import { Component, Input } from '@angular/core';
  import { NgForm } from '@angular/common';
  
  import { FooService } from '../index'
  
  @Component({
      selector: 'foo-a',
      moduleId: module.id,
      templateUrl: 'foo-a.component.html',
      providers: [FooService]
  })
  
  export class FooAComponent {
  
      constructor(private fooService: FooService) {}
  
  }
  </code></pre>
  
  <p>This came about after I refactored a bunch of code according to the style guidelines from a very flat structure to the slightly more grouped structure with bucket files. I initially did it all at once and got that error, couldn't figure out what was broken since the error message is archaic and stepping through the code wasn't very fruitful, though it did appear to be coming from this file. I then slowly did it file by file, line by line, until this error.</p>
  
  <p>Interestingly enough, it works if I directly reference the file:</p>
  
  <pre><code>// foo-A.component.ts - **works**
  import { Component, Input } from '@angular/core';
  import { NgForm } from '@angular/common';
  
  import { FooService } from '../foo.service'
  
  @Component({
      selector: 'foo-a',
      moduleId: module.id,
      templateUrl: 'foo-a.component.html',
      providers: [FooService]
  })
  
  export class FooAComponent {
  
      constructor(private fooService: FooService) {}
  
  }
  </code></pre>
  
  <p>System.config.js:</p>
  
  <pre><code>/**
   * System configuration for Angular 2 samples
   * Adjust as necessary for your application needs.
   */
  (function(global) {
    // map tells the System loader where to look for things
    var map = {
      'app':                        'app', // 'dist',
      '@angular':                   'node_modules/@angular',
      'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
      'rxjs':                       'node_modules/rxjs',
      'ng2-ace':                    'node_modules/ng2-ace'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
      'app':                        { main: 'main.js',  defaultExtension: 'js' },
      'rxjs':                       { defaultExtension: 'js' },
      'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      'ng2-ace':                    { main: 'index.js', defaultExtension: 'js' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
      packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
      packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
      map: map,
      packages: packages
    };
    System.config(config);
  })(this);
  </code></pre>
  
  <p>Why does referencing the service directly work, but referencing via a bucket file result in a "undefined" error?</p>