Menu
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.
521
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.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
