Question

我尝试在Angular 2应用程序中使用Angular2 / http模块，但是当我尝试导入它时，system.src.js会抛出错误http：/// angular2 / http 404 not found。

以下是我的index.html的样子：

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

我尝试导入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')
    );
  }
}

如果有人能解释如何使导入工作，那将会很棒。我也尝试在我失败之前导入第三方库。

感谢您的帮助。

Answer 1

在index.html中包含http.dev.js

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

Answer 2

您必须将其包含在脚本标记中或使用SystemJS加载它。

如果您打算通过SystemJS这样做，请考虑以下要点：

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

基本上，您使用地图或路径映射其他库，然后在应用中导入它们。如果您将angular2.min.js和http.min.js与脚本标记一起包含在内，则不需要使用SystemJS（SystemJS的优点是能够将其捆绑到一个文件中）。

示例：

如果你在地图中执行此操作：

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

在您的代码中，您正在使用以下内容导入库：

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

的

import { exported_stuff } from 'my-library'

Answer 3

在此示例中，您使用的是subscribe和map函数。因此，您需要导入observable并映射到此组件。

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

你的构造函数就像，

 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>

如何在Angular 2中导入其他模块？

3 个答案: