Angular2 Rxjs 404错误_Angular_Rxjs_Systemjs

Angular2 Rxjs 404错误

angular rxjs

Angular2 Rxjs 404错误,angular,rxjs,systemjs,Angular,Rxjs,Systemjs,尝试启动Angular2应用程序时出现以下错误： 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> &l

尝试启动Angular2应用程序时出现以下错误：

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>


条纹机
System.config({
套餐：{
应用程序：{
格式：'寄存器'，
defaultExtension:'js'
},
},
});
System.import（'app/boot'）
.then（null，console.error.bind（console））；
加载。。。

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]);

//
从“/App.component”导入{App}；
从'angular2/platform/browser'导入{bootstrap}；
从“angular2/ROUTER”导入{ROUTER_PROVIDERS}；
从'angular2/HTTP'导入{HTTP_提供者}；
从“./APP.module”导入{APP_PROVIDERS}；
引导（应用程序[
//路由器供应商，
//HTTP_提供商，
应用程序提供商]；

我已经尝试将rxjs的路径放在system.config中（它不起作用），但是因为我使用rxjs包，所以我不应该这样做。

问题出在您的

streak maker/src/streak maker.Web/App/message board/message board.service.ts

文件中

您应该导入

rxjs

模块，因为它在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();
    });
  }
}

你说得对：包含Rx.js文件足以提供Rxjs模块。如HydTechie所述（在2016年11月25日16时22分的评论中留下），在

SystemJS.config

中不需要额外的（明确的）配置，错误消息可能会非常误导

我的第一个问题是CodeMagazine的一期使用了“rxjs/add/operator/throw”的导入，其中实际路径应该是“rxjs/add/observable/throw”

但是，即使在纠正错误并尝试在此处和其他地方指出的修复之后，我也没有从Chrome开发工具控制台得到一个准确的错误。它指责zone.js查看了不存在的throw.js库

当我在IE中查看相同的代码时，我发现我的componentUrl文件名中有一个type-o，出于某种原因，它从我的http服务中冒泡出来，并被捕获到控制台的输出

因此，HydTechie的咆哮blogspot虽然不全面，但确实正确地指出真正的错误不容易发现

我发现我不需要在systemjs.config中添加任何超出angular quick start默认rxjs:{defaultExtension:'js'}packages条目的内容，并修复导入'rxjs/add/operator/throw'；导入“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

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

你完全正确，谢谢！介意告诉我你是怎么找到这个问题的吗？不客气！事实上，当SystemJS找不到注册的模块时（Rxjs就是这种情况，因为您包含

Rx.js

文件），它会尝试从URL加载模块：http:///. 因此，我猜您试图加载

rxjs

模块，但该模块不是由rxjs提供的。它相当于

rxjs/Rx

。所以我在你的代码中寻找了这样的导入：

import'rxjs'…因此，一旦您使用SystemJS映射指定了一个目录，您就可以通过导入/？假设您正确设置了defaultExtension。此错误消息具有误导性，可能不是确切的问题，请根据我的经验阅读@
// 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
  }
}