3

我使用angular-cli创建了一个新的 angular2 应用程序。现在我试图使用HTTP从 API 获取数据。我写的代码：

电影服务.ts

import { Injectable } from '@angular/core';
import { Movie } from './movie';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

我的原子编辑器@angular/http在线给出错误。所以，我已经在我的项目文件夹上手动安装angular2，npm install angular2然后修改生成的错误行，如下所示：

import { Http, Response } from 'angular2/http';

但是现在我的控制台显示：

“网络错误：404 未找到 - http://localhost:4200/angular2/http/index.js ”

我在index.html页面中添加了以下脚本：

<script src="https://code.angularjs.org/2.0.0-beta.17/http.dev.js"></script>

并在我的package.json文件依赖项"angular2": "2.0.0-beta.17",中。仍然是同样的错误。

有人有任何线索吗？我是angular2的新手。因此，非常感谢任何帮助或建议。

4

3 回答 3

2

我认为你混合了 beta 版和 rc 版。

在 beta 版本中，有一些捆绑的 JS 文件按名称预注册模块。像这样的东西：

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

在这种情况下，不需要对 SystemJS 中的 Angular2 模块进行自定义配置：

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

使用 rc 版本，Angular2 不提供这个（还），你需要为 Angular2 模块显式配置 SystemJS：

var map = {
  'app':                        'app', // 'dist',
  'rxjs':                       'node_modules/rxjs',
  'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
  '@angular':                   'node_modules/@angular'
};

var packages = {
  'app':                        { main: 'main.js',  defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },
  'angular2-in-memory-web-api': { defaultExtension: 'js' },
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
  map: map,
  packages: packages
}

if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);
于 2016-05-09T07:46:43.190 回答
2

我猜你没有使用 angular2 的 beta 版本所以打开 package.json 并在依赖项下添加这一行

"@angular/http": "2.0.0-rc.1",

然后打开终端并输入

npm install

它将更新您的 system-config.ts

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/tree',
  'app/tree/item',
  /** @cli-barrel */
];

它在哪里 

const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/tree',
  'app/tree/item',
  /** @cli-barrel */
];

所以现在你可以使用

'@angular/http'

代替

 'angular2/http'
于 2016-05-09T17:38:20.633 回答
1

您需要使用 Angular2 的 RC 版本，而不是 beta.17。据我所知，导入 from@angular是在 RC 版本中引入的。

在这个版本中，他们将 angular2 拆分为多个包。这意味着，您需要在package.json.

"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1"

笔记

我没有测试过它，但它对我来说很好。

于 2016-05-09T07:42:06.280 回答