1

我一直在尝试多次尝试使用来自 RXJS 的 Subject 和 BehaviorSubject 构建基本服务......我的问题是，每次我包含 RXJS 时，TypeScript 编译时都没有错误，但我得到了这个错误：

控制台屏幕抓取

根据这篇文章更新我的 index.html 后，我收到以下错误（并且没有页面加载）。

发布更新的 html 文件

我对 Angular 2、Typescript 和 RXJS 还是很陌生，因此感谢您提供任何帮助。我已经在下面发布了我认为所有相关的代码，如果还有其他可能有帮助的东西，请告诉我，我会更新请求的部分。

Index.html * 已更新

<html>
<head>
    <title>SCV Equipment Tracker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- 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.dev.js"></script>

    <!-- Front End Libraries -->
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
    <script src="semantic/dist/semantic.min.js"></script>
    <link rel="stylesheet" type="text/css" href="template/css/main.css"/>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            defaultJSExtensions: true,
            paths: {
                // DON'T CHANGE KEY OF THIS PATH, CHANGE VALUE ONLY
                // IF YOU EXPOSE node_modules as public / static dir to your app, you can remove this line.
                'semantic-ui/dist/components/*': 'semantic/dist/components/*.js',
                // REQUIRED BY ANGULAR 2 ( CHANGE PATH )
            },
            map: {
                // IF YOU ARE NOT ABLE TO LOAD FROM node_modules
                // you must copy ng-semantic from /node_modules/ng-semantic
                // ( files: semantic.js, semantic.d.ts and folder: ng-semantic )
                // and set path to it
                'ng-semantic/semantic': 'node_modules/ng-semantic/semantic.js'
            },
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
                .then(null, console.error.bind(console));
    </script>
</head>

<!-- 3. Display the application -->
<body>
<eqTracker>
    <div class="ui active inverted dimmer">
        <div class="ui large text loader">Loading</div>
    </div>
</eqTracker>
</body>
</html>

{
  "name": "equipment-tracker-frontend",
  "version": "0.0.1",
  "description": "front end for equipment tracker",
  "main": "index.html",
  "scripts": {
    "start": "npm run tsc:w ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "angular2": "2.0.0-beta.9",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "jquery": "^2.2.1",
    "ng-semantic": "^1.0.17",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "semantic-ui": "^2.1.8",
    "systemjs": "0.19.24",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "typescript": "^1.8.7",
    "typings": "^0.7.5"
  }
}

UserService.ts（请注意，这是 ng-book 2 用户服务的克隆，因为这就是我正在学习 angular 2 的内容）

import {Injectable, bind} from 'angular2/core';
import {Subject, BehaviorSubject} from 'rxjs';

//Models
import {User} from "../models/user.model";

@Injectable()
export class UserService{
    currentUser: Subject<User> = new BehaviorSubject<User>(null);

    public setCurrentUser(newUser: User):void{
        this.currentUser.next(newUser);
    }
}

export var userServiceInjectables: Array<any> = [
    bind(UserService).toClass(UserService)
];

根据 Thierry Templier 的响应更新错误因此，在根据 Thierry 的回答更新我的 index.html 页面后，我得到以下信息： 更新 index.html 后发布错误

现在我也错过了我所有的棱角分明的东西......

使用临时解决方案进行编辑：因此，由于 Thierry Templier 的评论，我找到了一个可行的解决方案...从原始服务中，我需要包含诸如 import 之类的 rx 内容{Subject, BehaviorSubject} from 'rxjs/Rx'; ，然后使用我已经拥有的映射它确实有效

System.config({
        defaultJSExtensions: true,
        paths: {
            // DON'T CHANGE KEY OF THIS PATH, CHANGE VALUE ONLY
            // IF YOU EXPOSE node_modules as public / static dir to your app, you can remove this line.
            'semantic-ui/dist/components/*': 'semantic/dist/components/*.js',
            // REQUIRED BY ANGULAR 2 ( CHANGE PATH )
        },
        map: {
            // IF YOU ARE NOT ABLE TO LOAD FROM node_modules
            // you must copy ng-semantic from /node_modules/ng-semantic
            // ( files: semantic.js, semantic.d.ts and folder: ng-semantic )
            // and set path to it
            'ng-semantic/semantic': 'node_modules/ng-semantic/semantic.js',
            'angular2': 'node_modules/angular2',
            'rxjs': 'node_modules/rxjs'
        },
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });

从我读到的试图解决这个问题的所有内容中，尝试学习 Angular 2 Thierry Templier 应该是正确的，并且不需要映射。我将尝试在其他时间深入研究并解决该问题，但是正是他的评论帮助我获得了工作的角度，这就是他的回答被接受的原因。

4

1 回答 1

1

因为您包含该node_modules/rxjs/bundles/Rx.js文件，所以我认为您不需要将 rxjs 配置到您的 SystemJS 配置中。

事实上，该文件使用System.register. Angular2 文件也一样。

我会像这样更新您的配置：

System.config({
  defaultJSExtensions: true,
  paths: {
    'semantic-ui/dist/components/*': 'semantic/dist/components/*.js'
  },
  map: {
    'ng-semantic/semantic': 'node_modules/ng-semantic/semantic.js',
  },
  packages: {
    app: {
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
于 2016-03-15T16:42:37.950 回答