Angular2 Rxjs 404 error

问题

I have the following error when trying to start my Angular2 application:

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(…)

Here is my 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]);

I've tried putting paths for rxjs in the system.config (it doesn't work) but since I'm using the rxjs bundle I shouldn't have to do that.

回答1:

The problem is in your streak-maker/src/StreakMaker.Web/App/message-board/message-board.service.ts file

You should import the rxjs module since it doesn't exist in the Rxjs library:

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();
    });
  }
}

You should use the following one (rxjs/Rx) instead:

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

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

You're right: include the Rx.js file is enough to provide the Rxjs modules. No additional (explicit) configuration is required within SystemJS.config.

回答2:

As noted by HydTechie (left in comment on Nov 25 '16 at 16:22), the error message can be very misleading.

My initial issue was that a CodeMagazine issue May Jun 2017 "From Zero to Crud in Angular: Part 1" had a typo using an import for 'rxjs/add/operator/throw' where the actual path should have been 'rxjs/add/observable/throw'.

But even after correcting, and attempting fixes noted here and elsewhere, I didn't get an accurate error from the Chrome dev tools console. It accused zone.js for looking at the non-existent throw.js library.

When i reviewed the same code in IE, i found I had a type-o in my componentUrl filename, which for some reason bubbled up out of my http service and was caught there an output to the console.

So HydTechie's rant blogspot, while not comprehensive, did correctly indicate that true errors aren't easy to find.

I found i didn't need to add anything beyond the angular quick start default rxjs: {defaultExtension:'js'} packages entry in my systemjs.config, and fix the import 'rxjs/add/operator/throw'; to be import '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

from 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
  }
}

来源：https://stackoverflow.com/questions/36239813/angular2-rxjs-404-error

标签

angular

rxjs

systemjs