为什么我的角度2服务在我的应用程序中不可见？

Question

我正试图通过我的角度服务读取JSON文件。 当我不使用该服务时，我可以轻松阅读JSON数据＆amp;将其绑定在变量中。 但是当我使用服务来执行此操作时，它无法正常工作。 它显示以下错误：

Failed to load resource: the server responded with a status of 404.

我确信我已经正确地写了路径。

目录结构

以下是代码：

1. app.component.ts

import {Component} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Observable} from 'rxjs/Rx';
import { DataService } from '../services/data.service';

@Component({
    selector: 'my-app',
    providers: [DataService],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public record;
    constructor(private dataService: DataService) { }
    ngOnInit() {
        this.dataService.getDetails()
        .subscribe((customers:any[]) => {
          this.record = customers;
        });              
    }  
}

1. data.service.ts

import { Injectable } from 'angular2/core';
import { Http, Response } from 'angular2/http';
import {Observable} from 'rxjs/Rx';

@Injectable()
export class DataService {    
    constructor(private http: Http) { }    
    getDetails() {
        return this.http.get('../uicomponent.json')
            .map((res:Response) => res.json());     
    }
}

1. bootstrap config

<script>
      System.config({
        map: { 'rxjs': 'node_modules/rxjs' },
        packages: {
          app: { format: 'register', defaultExtension: 'js' },
          'rxjs': {defaultExtension: 'js'}
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

1. main.ts

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';
import {AppComponent} from './app.component'
 
bootstrap(AppComponent, [
  HTTP_PROVIDERS
]);

Answer 1

services文件夹应位于app文件夹下。根据您的SystemJS配置，只使用此配置加载此文件夹下的资源：

System.config({
  (...),
  packages: {
    app: { format: 'register', defaultExtension: 'js' },
    (...)
  }
});
format: 'register', defaultExtension: 'js'

这意味着SystemJS将自动尝试使用js扩展名加载模块。

所以结构应如下：

project
  - app
    - app.component.ts
    - main.ts
    - services
      - data.service.ts

在app.component.ts文件中，您可以使用以下方法导入服务：

import {DataService} from './services/data.service';

根据其配置，如果TypeScript编译器之前完成其工作，SystemJS将尝试加载应存在的localhost:3000/app/services/data.service.js; - ）

亨利