All geek questions in one place

Angular2 Error Rxjs 404

I have the following error while trying to start an 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 tried putting the paths for rxjs in system.config (it does not work), but since I am using the rxjs package, I should not do this.

+5
source share
2 answers

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

You must import the rxjs module as it does not 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(); }); } }

Instead, you should use the following ( rxjs/Rx ):

 import {Http} from 'angular2/http'; import {Injectable} from 'angular2/core'; import "rxjs/Rx"; // <----- @Injectable() export class MessageBoardService { (...) }

You are right: including an Rx.js file is enough to provide Rxjs modules. No additional (explicit) configuration is required within SystemJS.config .

+15
source

As noted by HydTechie (see commentary dated November 25, 1616 at 16:22), the error message can be very erroneous.

My initial problem was that the CodeMagazine problem May June 2017 “From zero to Crud in Angular: Part 1” had a typo using the import for “rxjs / add / operator / throw”, where the actual path should be “rxjs / add / observable / throw ".

But even after the fix and fix noted here and elsewhere, I did not get the exact error from the Chrome dev tool console. He accused zone.js of looking for a nonexistent throw.js library.

When I looked at the same code in IE, I found that I had type-o in my componentUrl file name, which for some reason broke out of my http service and the console output was caught there.

So, HydTechie rant blogspot, although not exhaustive, has correctly shown that true errors are not easy to find.

I found that I did not need to add anything outside the default angular quick launch package rxjs: {defaultExtension: 'js'} in my system jsconfig and fix the import' rxjs / add / operator / throw "; to 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 } }
0
source

Source: https://habr.com/ru/post/1245826/

More articles:


All Articles