title: Error: (SystemJS) XHR error (404 Not Found) loading service
body: <p>I'm currently trying to use a service to pass a string. However, at my <code>AppComponent</code> I'm getting <code>undefined</code> Service.</p>
  
  <p>This is the error:</p>
  
  <pre><code>Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/services/main.service
      patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:698:26
      ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:265:21
      Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:154:28
      ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:335:28
  
      Error loading http://localhost:3000/services/main.service as "../services/main.service" from http://localhost:3000/app/app.module.js
  Stack trace:
  (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/services/main.service
      patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:698:26
      ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:265:21
      Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:154:28
      ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:335:28
  
      Error loading http://localhost:3000/services/main.service as "../services/main.service" from http://localhost:3000/app/app.module.js
  </code></pre>
  
  <p><strong>main.service.ts</strong></p>
  
  <pre><code>import { Injectable }                   from '@angular/core';
  import { Http, Headers, Response }      from '@angular/http';
  import { Observable }                   from 'rxjs/Observable';
  import 'rxjs/add/operator/toPromise';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class MainService {
      private projectURL = 'http://localhost:64895/api/Process/ProcessFile';
      private headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
  
      constructor(private http: Http) { }
  
      public passFileUrl = (filePath: string): Observable&lt;number&gt; =&gt; {
          var json = JSON.stringify(filePath);
          return this.http.post(this.projectURL, json, {headers: this.headers})
                      .map((response: Response) =&gt; &lt;number&gt;response.json());
      }
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { MainService } from '../services/main.service';
  
  @Component({
    selector: 'converter-utility',
    templateUrl: './app/views/main.component.html',
    providers: [MainService],
    styleUrls: ['./app/views/css/main.component.css']
  })
  
  export class AppComponent {
    private workableFile: string;
  
    constructor(
      private mainService: MainService
      ) { }
  
    doProcess() {
      this.mainService.passFileUrl(this.workableFile)
                      .subscribe((data: any) =&gt; {
                        console.log(data);
                      });
    }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FormsModule }   from '@angular/forms';
  import { AppComponent }  from './app.component';
  import { MainService }   from '../services/main.service';
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule
    ],
    declarations: [
      AppComponent
    ],
    providers: [
          MainService,
      ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>systemjs.config.js</strong></p>
  
  <pre><code>/**
   * System configuration for Angular samples
   * Adjust as necessary for your application needs.
   */
  (function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        app: 'app',
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: {
          main: './main.js',
          defaultExtension: 'js'
        },
        rxjs: {
          defaultExtension: 'js'
        }
      }
    });
  })(this);
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "angular-quickstart",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" ",
      "lite": "lite-server",
      "tsc": "tsc",
      "tsc:w": "tsc -w"
    },
    "licenses": [
      {
        "type": "MIT",
        "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
      }
    ],
    "dependencies": {
      "@angular/common": "~2.1.1",
      "@angular/compiler": "~2.1.1",
      "@angular/core": "~2.1.1",
      "@angular/forms": "~2.1.1",
      "@angular/http": "~2.1.1",
      "@angular/platform-browser": "~2.1.1",
      "@angular/platform-browser-dynamic": "~2.1.1",
      "@angular/router": "~3.1.1",
      "@angular/upgrade": "~2.1.1",
      "angular-in-memory-web-api": "~0.1.13",
      "core-js": "^2.4.1",
      "reflect-metadata": "^0.1.8",
      "rxjs": "5.0.0-beta.12",
      "systemjs": "0.19.39",
      "zone.js": "^0.6.25"
    },
    "devDependencies": {
      "@types/core-js": "^0.9.34",
      "@types/node": "^6.0.45",
      "concurrently": "^3.0.0",
      "lite-server": "^2.2.2",
      "typescript": "^2.0.3"
    }
  }
  </code></pre>
  
  <p><strong>The App Structure</strong></p>
  
  <pre><code>  app
     app.component.ts
     app.module.ts
     main.ts
    node_modules ...
    services
     main.service.ts
    index.html
    package.json
    styles.css
    systemjs.config.js
    tsconfig.json
  </code></pre>
  
  <p>I've tried a few solutions such as <a href="https://stackoverflow.com/a/40402361/3812244">this one</a> with no sucess. I do realise there are lots of similar questions out there (which could classify this question as duplicated), but none that helped me to fix it.
  Not to mention that I'm using Angular 2 for a few days now, so the problem may be between the chair and the keyboard. ☺
  I do appreciate if you could assist me to give some directions.</p>
  
  <p>Many thanks in advance!</p>