2016-03-26 26 views
5

ho il seguente errore quando si tenta di avviare la mia domanda Angular2:Angular2 Rxjs 404 errore

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

Ecco il mio 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]); 

Ho provato a mettere percorsi per rxjs in system.config (non funziona) ma dal momento che sto usando il pacchetto rxjs non avrei dovuto farlo.

risposta

15

Il problema è nel file streak-maker/src/StreakMaker.Web/App/message-board/message-board.service.ts

Si dovrebbe importare il modulo rxjs dal momento che non esiste nella libreria Rxjs:

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

si dovrebbe usare il seguente (rxjs/Rx) invece:

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

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

Hai ragione: includere il file Rx.js è sufficiente per fornire i moduli Rxjs. Non è richiesta alcuna configurazione aggiuntiva (esplicita) entro SystemJS.config.

+0

Hai assolutamente ragione, grazie! Ti dirò come hai rintracciato il problema? –

+0

Prego! Infatti, quando SystemJS non riesce a trovare un modulo registrato (è il caso di Rxjs qui poiché si include il file 'Rx.js'), prova quindi a caricare il modulo da un URL: http: // /. Quindi suppongo che tu abbia provato a caricare il modulo 'rxjs' ma questo modulo non è fornito da Rxjs. È piuttosto 'rxjs/Rx'. Quindi ho cercato un'importazione come questa nel tuo codice: 'import 'rxjs';' ... –

+0

Quindi, una volta specificata una directory con la mappa SystemJS, è possibile fare riferimento a qualsiasi file in particolare importando '/'? Supponendo che il set predefinito di default sia corretto. –

0

Come notato da HydTechie (lasciato in commento il 25 novembre 16 alle 16:22), il messaggio di errore può essere molto fuorviante.

Il mio problema iniziale era che un problema CodeMagazine May Jun 2017 "From Zero to Crud in Angular: Part 1" aveva un errore di battitura utilizzando un'importazione per 'rxjs/add/operator/throw' dove il percorso effettivo avrebbe dovuto essere 'rxjs/add/observable/throw'.

Ma anche dopo aver corretto e provato le correzioni annotate qui e altrove, non ho ricevuto un errore accurato dalla console degli strumenti di sviluppo di Chrome. Ha accusato zone.js di aver guardato la libreria throw.js inesistente.

Quando ho rivisto lo stesso codice in IE, ho trovato che avevo un tipo -o nel mio nomefile componentUrl, che per qualche motivo è uscito dal mio servizio http e ho trovato un output nella console.

Così il blogspot di HydTechie, anche se non completo, ha correttamente indicato che gli errori veri non sono facili da trovare.

Ho trovato che non avevo bisogno di aggiungere nulla oltre il rxjs di avvio rapido angolare predefinito: {defaultExtension: 'js'} voce dei pacchetti nel mio systemjs.config, e correggere l'importazione 'rxjs/add/operator/throw' ; da importare '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 

da 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 
    } 
} 
Problemi correlati