angular - Error: (SystemJS) XHR error (404 Not Found) loading service -
i'm trying use service pass string. however, @ appcomponent i'm getting undefined service.
this 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 "../services/main.service" 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 "../services/main.service" http://localhost:3000/app/app.module.js main.service.ts
import { injectable } '@angular/core'; import { http, headers, response } '@angular/http'; import { observable } '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 } '@angular/core'; import { mainservice } '../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 } '@angular/core'; import { browsermodule } '@angular/platform-browser'; import { formsmodule } '@angular/forms'; import { appcomponent } './app.component'; import { mainservice } '../services/main.service'; @ngmodule({ imports: [ browsermodule, formsmodule ], declarations: [ appcomponent ], providers: [ mainservice, ], bootstrap: [ appcomponent ] }) export class appmodule { } systemjs.config.js
/** * system configuration angular samples * adjust necessary application needs. */ (function (global) { system.config({ paths: { // paths serve alias 'npm:': 'node_modules/' }, // map tells system loader things map: { // our app within 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 system loader how 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 few solutions such this one no sucess. realise there lots of similar questions out there (which classify question duplicated), none helped me fix it. not mention i'm using angular 2 few days now, problem may between chair , keyboard. ☺ appreciate if assist me give directions.
many in advance!
resolution:
move service folder inside app folder, correct imports point correct location fix 404 error.
to use service folder outside app folder:
open systemjs.config.js
add:
var map = { 'services' : '/services', };
Comments
Post a Comment