可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I tried to use the Angular2/http module within my Angular 2 app, but when I try to import it system.src.js throws an error http:///angular2/http 404 not Found.

Heres how my index.html looks like:

<html>
  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <script src="angular2/bundles/angular2-polyfills.js"></script>
    <script src="systemjs/dist/system.src.js"></script>

    <script src="rxjs/bundles/Rx.js"></script>
    <script src="angular2/bundles/angular2.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

    <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/styles/main.css" rel="stylesheet">
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

The component where I try to import http:

import {Injectable} from 'angular2/core';
import {Track} from './track'
import {Http, Headers} from 'angular2/http';

@Injectable()
export class ActionTracker {
  constructor(private _http : Http){}

  login(){
    this._http.post('/api/login', "")
    .map(res => res.json())
    .subscribe(
      data => console.log(data),
      err => console.log(err),
      () => console.log('Authentication Complete')
    );
  }
}

Would be great if anyone could explain how to make the import work. I also tried to import a third party lib before where I failed too.

Thanks for your help.

回答1:

Include http.dev.js in your index.html

<script src="angular2/bundles/http.dev.js"></script>

回答2:

You must include it in script tags or load it with SystemJS.

If you are going to do that via SystemJS, consider this gist:

https://gist.github.com/vladotesanovic/db89488b8961fa6c2af6

Basically, you are mapping other libraries with map or paths, and then, you are importing them in your app. If you included angular2.min.js and http.min.js with your script tags, you don't need to do that with SystemJS ( advantage with SystemJS is ability to bundle it into one file at the end ).

Example:

If you do this in map:

'my-library': 'location/my-libary.js'

in your code, you are importing library with this:

import * as my-library from 'my-library'

import { exported_stuff } from 'my-library'

回答3:

In this sample, you are using subscribe and map function. So, you need to import observables and map to this component.

import {Observable} from 'rxjs/Observable';
import 'Rxjs/add/operator/map';

And your constructor be like,

 constructor(public http: Http) {     
    this.http = http;
    }

boot.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(AppComponent,[HTTP_PROVIDERS]);

index.html

<script>
  System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {
        'app': {defaultExtension: 'ts'},
        '../node_modules/rxjs': { defaultExtension: 'js' }
    },
      paths: {
          'rxjs/operator/*': '../node_modules/rxjs/add/operator/*.js',
          'rxjs/*': '../node_modules/rxjs/*.js'
      }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>