I've been trying multiple times to get a basic service built using Subject and BehaviorSubject from RXJS... My issue is that every time I include RXJS the TypeScript compiles with no errors but I get this error:
After updating my index.html based on this post I get the following errors (and no page load).
I'm still pretty new to Angular 2, Typescript, and RXJS so any help is appreciated. I've posted what I believe to be all relevant code below, let me know if there is something else that might assist and i'll update with requested part.
Index.html * Updated
<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 (note this is a clone of ng-book 2 user service as that's what i'm learning angular 2 from)
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)
];Updated error based on Thierry Templier's response
So after updating my index.html page based on Thierry's answer I get the following:
Now i'm missing all my angular stuff too...
Edit With Temporary Solution:
So I found a solution that worked thanks to Thierry Templier's comment... From the original service I needed to include the rx stuff like import {Subject, BehaviorSubject} from 'rxjs/Rx';
After that with the mappings I already had It did work
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'
}
}
});
From everything I've read trying to solve this issue, and trying to learn Angular 2 Thierry Templier should be right and the mappings should not be needed. I'll try to dive in and solve that issue some other time, but that and it was his comment that helped me get a working angular back is why his answer was accepted.
