Error: (SystemJS) XHR error (404 Not Found) loading service

Question

I'm currently trying to use a service to pass a string. However, at my AppComponent I'm getting undefined Service.

This is the error:

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

main.service.ts

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<number> => {
        var json = JSON.stringify(filePath);
        return this.http.post(this.projectURL, json, {headers: this.headers})
                    .map((response: Response) => <number>response.json());
    }
}

app.component.ts

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) => {
                      console.log(data);
                    });
  }
}

app.module.ts

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 { }

systemjs.config.js

/**
 * 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);

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && 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"
  }
}

The App Structure

  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

I've tried a few solutions such as this one 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.

Many thanks in advance!

Answer 1

Resolution:

Move the service folder inside the app folder, correct the imports so they point to the correct location this will fix the 404 error.

To use the service folder outside the app folder:

Open systemjs.config.js

Add:

var map = {
    'services' : '/services', 
};

Answer 2

The problem is that the string specified in the from section should resolve to a file. For instance, the following import statement:

import { MainService } from '../services/main.service';

Without extra configuration, SystemJS tries to load the file '../services/main.service' (note: no extension).

Option 1: configure SystemJS to add the default extension of '.js' for your code. See the SystemJS Configuration API reference for multiple ways to do it.

Option 2: Specify the .js extension in your import statement. This is a TypeScript feature that was originally discussed here.

Personally, I prefer the first option.