Angular2 Rxjs 404 error

Asked 26/3, 2016 at 19:21 Answered 14/9, 2017 at 17:16

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.

Auricula answered 26/3, 2016 at 19:21 Comment(0)

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.

Emplace answered 26/3, 2016 at 19:27 Comment(4)

You're absolutely right, thanks! Mind telling how you tracked down the problem? – Auricula 26/3, 2016 at 19:39

You're welcome! In fact, when SystemJS can't find a registered module (it's the case with Rxjs here since you include the Rx.js file), it tries then to load the module from an URL: http://<host>/<module-name>. So I guess that you tried to load the rxjs module but this module isn't provided by Rxjs. It's rather rxjs/Rx. So I looked for an import like this in your code: import 'rxjs';... – Emplace 26/3, 2016 at 20:2

So once you specify a directory with the SystemJS map, you can reference any file specifically by importing <package>/<filename>? Assuming you have the defaultExtension set correctly. – Tighe 12/6, 2016 at 2:53

This error message is quite misleading, it may not be exact issue, read on my experience @ phanikatakam.blogspot.in/2016/11/… – Perrotta 25/11, 2016 at 16:22

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

Antoniaantonie answered 14/9, 2017 at 17:16 Comment(0)

Recommended topics

Hot tags