Angular2 Rxjs 404 Fehler

Ich habe folgende Fehlermeldung beim Versuch meiner Angular2 Anwendung zu starten:Angular2 Rxjs 404 Fehler

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

Hier ist mein 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]);

Ich habe versucht, Pfade für rxjs in der system.config zu setzen (es funktioniert nicht), aber da ich das Rxjs-Bundle verwende, sollte ich das nicht tun müssen.

Quelle

2016-03-26 Ryan Langton

Das Problem ist in Ihrer streak-maker/src/StreakMaker.Web/App/message-board/message-board.service.ts Datei

Sie sollten das rxjs Modul importieren, da es nicht in der Rxjs Bibliothek existiert:

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

sollten Sie verwenden die folgenden (rxjs/Rx) statt:

Sie haben recht: Schließen Sie die Rx.js-Datei ein, um die Rxjs-Module bereitzustellen. Innerhalb SystemJS.config ist keine zusätzliche (explizite) Konfiguration erforderlich.

Quelle

2016-03-26 19:27:11

Sie haben völlig Recht, danke! Wissen Sie, wie Sie das Problem aufgespürt haben? –

Gern geschehen! Wenn SystemJS ein registriertes Modul nicht finden kann (dies ist hier bei Rxjs der Fall, da Sie die Datei 'Rx.js' enthalten), versucht es dann, das Modul von einer URL zu laden: http: // /. Ich nehme an, dass Sie versucht haben, das 'rxjs'-Modul zu laden, aber dieses Modul wird nicht von Rxjs bereitgestellt. Es ist eher 'rxjs/Rx'. Also habe ich in Ihrem Code nach einem solchen Import gesucht: 'import 'rxjs;' ... –

Wenn Sie also ein Verzeichnis mit der SystemJS-Map angeben, können Sie auf jede Datei spezifisch verweisen, indem Sie '/' 'importieren? Angenommen, Sie haben die defaultExtension korrekt gesetzt. –

Wie von HydTechie (links im Kommentar am 25. November 16 um 16:22) bemerkt, kann die Fehlermeldung sehr irreführend sein.

Mein erstes Problem war, dass ein CodeMagazine-Problem May Jun 2017 "From Zero to Crud in Angular: Part 1" einen Tippfehler hatte, der einen Import für 'rxjs/add/operator/throw' verwendete, wo der tatsächliche Pfad 'rxjs/add/observable/throw' hätte sein sollen.

Aber auch nach dem Korrigieren und dem Versuch, hier und an anderen Stellen behobene Fehler zu beheben, habe ich von der Chrom-Dev-Tools-Konsole keinen genauen Fehler erhalten. Es beschuldigt zone.js, um die nicht vorhandene throw.js-Bibliothek zu betrachten.

Als ich den gleichen Code im IE überprüfte, fand ich einen Typ-O in meinem componentUrl-Dateinamen, der aus irgendeinem Grund aus meinem http-Dienst herausblubberte und dort eine Ausgabe zur Konsole erwischt wurde.

So HydTechie Rant Blogspot, obwohl nicht umfassend, hat richtig darauf hingewiesen, dass echte Fehler nicht leicht zu finden sind.

Ich fand ich nichts über die Winkelschnellstartstandard rxjs hinzufügen brauchte: {Default: ‚js‘} Pakete Eintrag in meinem systemjs.config und fixieren die Einfuhr ‚rxjs/add/Operator/throw‘ ; zu importieren '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

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

Quelle

2017-09-14 17:16:15 PixelSyndicate

Antwort

Verwandte Themen