Question

我在Angular 2 app中使用了一个服务，我收到了一个错误，附在下面。

我使用“Angular 2 QuickStart”克隆为“my-proj”开始了这个项目。

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',
},
// 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'
  },
  'angular-in-memory-web-api': {
    main: './index.js',
    defaultExtension: 'js'
   }
 }
});
})(this);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent }  from './app.component';
import { ProfileComponent }  from './components/profile.component';

@NgModule({
imports: [ BrowserModule,HttpModule,JsonpModule ],
declarations: [ AppComponent,ProfileComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

profile.component.ts

import { Component } from '@angular/core';
import {GithubService} from '../services/github.service';
import 'rxjs/add/operator/map';
@Component({
moduleId:module.id,
selector: 'profile',
templateUrl:'profile.component.html'
})
export class ProfileComponent { 

constructor(private githubService:GithubService){
    this.githubService.getUser().subscribe(user => {
        console.log(user);
    });
}
}

github.service.ts

import { Injectable } from '@angular/core';
import {Http,Headers} from '@angular/Http';
import 'rxjs/add/operator/map';
@Injectable()

export class GithubService{
private username:string;

constructor(private http:Http){
    console.log('Github Service Ready...');
    this.username='bradtraversy';
}

getUser(){
    return this.http.get('http://api.github.com/users'+this.username).map(res => res.json);
 }
}

Answer 1

在github.service.ts中，更改

import {Http,Headers} from '@angular/Http'

到

import {Http,Headers} from '@angular/http'

可能有帮助。

（systemjs）xhr错误（404未找到）加载

1 个答案: