Angular 2 Beta 9 未找到 RXJS
Angular 2 Beta 9 not finding RXJS
我已经多次尝试使用 RXJS 的 Subject 和 BehaviorSubject 构建基本服务...我的问题是每次我包含 RXJS 时,TypeScript 编译都没有错误,但我得到这个错误:
根据 post 更新我的 index.html 后,我收到以下错误(并且没有页面加载)。
我对 Angular 2、Typescript 和 RXJS 还是很陌生,所以非常感谢您的帮助。我已经 post 编辑了我认为是下面所有相关的代码,如果还有其他可能有用的东西,请告诉我,我会更新请求的部分。
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 页面后,我得到以下信息:
现在我的 angular 东西也不见了...
使用临时解决方案进行编辑:
因此,由于 Thierry Templier 的评论,我找到了一个有效的解决方案...从原始服务中,我需要包含 rx 内容,例如 import {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 应该是正确的,不需要映射。我会尝试在其他时间深入研究并解决该问题,但是正是他的评论帮助我重新开始工作 angular 这就是他的回答被接受的原因。
因为您包含 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'
}
}
});
我已经多次尝试使用 RXJS 的 Subject 和 BehaviorSubject 构建基本服务...我的问题是每次我包含 RXJS 时,TypeScript 编译都没有错误,但我得到这个错误:
根据
我对 Angular 2、Typescript 和 RXJS 还是很陌生,所以非常感谢您的帮助。我已经 post 编辑了我认为是下面所有相关的代码,如果还有其他可能有用的东西,请告诉我,我会更新请求的部分。
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 页面后,我得到以下信息:
现在我的 angular 东西也不见了...
使用临时解决方案进行编辑:
因此,由于 Thierry Templier 的评论,我找到了一个有效的解决方案...从原始服务中,我需要包含 rx 内容,例如 import {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 应该是正确的,不需要映射。我会尝试在其他时间深入研究并解决该问题,但是正是他的评论帮助我重新开始工作 angular 这就是他的回答被接受的原因。
因为您包含 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'
}
}
});