Error: (SystemJS) XHR error (404 Not Found) loading service
<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>