Question

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

movies.service.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';

现在我的控制台显示：

“NetworkError：404 Not Found - 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的新手。因此，任何帮助或建议都非常感谢。

Answer 1

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

在测试版中，有一些捆绑的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);

Answer 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'

Answer 3

你需要使用angular2的RC版本，而不是beta.17。据我所知，RC @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"

注意

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

angular2 CLI未找到HTTP错误

3 个答案: