angular2 CLI HTTP 未找到错误

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 行给出了错误。所以，我在我的项目文件夹中使用 npm install angular2 手动安装了 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 版。

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