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

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

在此示例中，您正在使用订阅和映射功能。 因此，您需要导入可观察对象并映射到该组件。

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 个解决方案

解决方案1
4 已采纳 2016-01-27 18:22:17

解决方案2
0 2016-01-27 19:40:42

解决方案3
0 2016-01-28 09:45:13

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2016-01-27 18:22:17

解决方案2 0 2016-01-27 19:40:42

解决方案3 0 2016-01-28 09:45:13

解决方案1
4 已采纳 2016-01-27 18:22:17

解决方案2
0 2016-01-27 19:40:42

解决方案3
0 2016-01-28 09:45:13