Question

我已多次尝试使用来自RXJS的Subject和BehaviorSubject构建基本服务...我的问题是每次我包含RXJS时TypeScript编译没有错误但是我收到此错误：

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

我仍然对Angular 2，Typescript和RXJS很新，所以任何帮助都会受到赞赏。我已经发布了我认为是下面所有相关代码的内容，请告诉我是否有其他可能有帮助的内容，并且我会更新所请求的部分。

Index.html *已更新

＆＃13;

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

＆＃13;

{
  "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"
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

根据Thierry Templier的回复更新错误因此，在根据Thierry的答案更新我的index.html页面后，我得到以下内容：

现在我也错过了我所有的角色......

使用临时解决方案进行编辑：所以我找到了一个有效的解决方案，感谢Thierry Templier的评论...从原始服务我需要包含像导入{Subject, BehaviorSubject} from 'rxjs/Rx';这样的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应该是正确的，不应该需要映射。我会尝试潜入并在其他时间解决这个问题，但是，正是他的评论帮助我恢复了工作角度，这就是为什么他的答案被接受了。

Answer 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'
    }
  }
});

Angular 2 Beta 9没有找到RXJS

1 个答案: