Angular2 Rxjs 404 错误

Question

尝试启动 Angular2 应用程序时出现以下错误：

Failed to load resource: the server responded with a status of 404 (Not Found)
angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:55707/rxjs(…)

这是我的 index.html:

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Streak Maker</title>
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
        },
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <app>Loading...</app>
</body>
</html>

boot.ts:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 

import {App} from './app.component';
import {bootstrap}  from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {APP_PROVIDERS} from './app.module';

bootstrap(App, [
    //ROUTER_PROVIDERS,
    //HTTP_PROVIDERS,
    APP_PROVIDERS]);

我试过将 rxjs 的路径放在 system.config 中（它不起作用）但是因为我使用的是 rxjs 包，所以我不应该这样做。

Answer 1

问题出在您的 streak-maker/src/StreakMaker.Web/App/message-board/message-board.service.ts 文件中

您应该导入 rxjs 模块，因为它不存在于 Rxjs 库中：

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import "rxjs"; // <-----

@Injectable()
export class MessageBoardService {
  constructor(private _http: Http) { }

  get() {
    return this._http.get('/api/messageboard').map(res => {
        return res.json();
    });
  }
}

您应该改用以下 (rxjs/Rx)：

import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
import "rxjs/Rx"; // <-----

@Injectable()
export class MessageBoardService {
  (...)
}

你是对的：包含 Rx.js 文件足以提供 Rxjs 模块。 SystemJS.config.

内不需要额外的（明确的）配置

Answer 2

正如 HydTechie 所指出的（在 2016 年 11 月 25 日在 16:22 发表评论），该错误消息可能非常具有误导性。

我最初的问题是 CodeMagazine 问题 May Jun 2017 "From Zero to Crud in Angular: Part 1" 使用导入 'rxjs/add/operator/throw' 的错字，实际路径应该是 'rxjs/add/observable/throw'.

但即使在更正并尝试修复此处和其他地方指出的问题之后，我也没有从 Chrome 开发工具控制台中得到准确的错误。它指责 zone.js 查看不存在的 throw.js 库。

当我在 IE 中查看相同的代码时，我发现我的 componentUrl 文件名中有一个 type-o，出于某种原因，它从我的 http 服务中冒出来，并在那里被捕获到控制台的输出。

所以 HydTechie 的咆哮博客虽然不全面，但确实正确地表明真正的错误不容易找到。

我发现除了 angular 快速启动默认 rxjs: {defaultExtension:'js'} 我的 systemjs.config 包条目之外我不需要添加任何东西，并修复导入'rxjs/add/operator/throw';待导入 'rxjs/add/obserable/throw';

// the product service will call the webapi for product collections
import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";

import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw'; // fixed typo

来自 systemjs.config.js

// packages tells the System loader how to load when no filename and/or no 
extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
      './*.js': {
        loader: 'systemjs-angular-loader.js'
      }
    }
  },
  rxjs: {
    defaultExtension: 'js' // this is fine as is
  }
}

Angular2 Rxjs 404 错误

Angular2 Rxjs 404 error

rxjs

systemjs

angular