Angular2 Rxjs 404エラー

私は、次のようなエラーがあります。ここではAngular2 Rxjs 404エラー

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バンドルを使用しているので、これを行う必要はありません。

出典

2016-03-26 Ryan Langton

問題は、それがRxjsライブラリに存在しないので、あなたがrxjsモジュールをインポートする必要があり、あなたのstreak-maker/src/StreakMaker.Web/App/message-board/message-board.service.tsファイルに

です：

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

あなたが代わりに次の1（rxjs/Rx）を使用する必要があります。

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

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

あなたはそうです：Rx.jsファイルはRxjsモジュールを提供するのに十分です。 SystemJS.config内に追加の（明示的な）設定は必要ありません。

出典

2016-03-26 19:27:11

から

// 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が登録されたモジュールを見つけることができないとき（Rxjsファイルを含んでいるのでRxjsの場合）、http：// /のURLからモジュールをロードしようとします。だから、あなたは 'rxjs'モジュールをロードしようとしましたが、このモジュールはRxjsによって提供されていないと思います。むしろ 'rxjs/Rx'です。だから私はあなたのコードでこのようなインポートを探しました： 'import 'rxjs';' ... –

SystemJSマップでディレクトリを指定したら、具体的には '/'をインポートして任意のファイルを参照できますか？ defaultExtensionが正しく設定されていると仮定します。 –

HydTechie（11月25日16時16分22秒のコメントに残っています）のように、エラーメッセージは非常に誤解を招く可能性があります。

私の最初の問題は、CodeMagazineの問題May Jun 2017 "From Zero to Crud in Angular: Part 1"に、実際のパスが 'rxjs/add/observable/throw'であるはずの 'rxjs/add/operator/throw'のインポートを使用しているという誤植でした。

ただし、修正して、ここや他の場所に記載されている修正を行った後でも、Chrome開発ツールコンソールから正確なエラーが表示されませんでした。それは存在しないthrow.jsライブラリを見てzone.jsを非難した。

私はIEで同じコードを見直したとき、私は何らかの理由で私のHTTPサービスから泡立ち、コンソールに出力がキャッチされた、componentUrlファイル名にタイプoがあることがわかりました。

HydTechieの暴動のblogspotは、包括的ではありませんが、真のエラーは簡単に見つけられないことを正しく示しています。

私は、systemjs.config内の角速度のデフォルトのrxjs：{defaultExtension： 'js'}パッケージのエントリを超えて何も追加する必要はないことを知り、 'rxjs/add/operator/throw' ;インポートする 'rxjs/add/obserable/throw'; 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 
    } 
}

出典

2017-09-14 17:16:15 PixelSyndicate

Angular2 Rxjs 404エラー

答えて

関連する問題