After finding an example on the internet, I have created my own systemjs.config.js:
(function (global) {
System.config({
paths: {
// paths serve as alias
'js:': 'js/',
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'js:angular2/core.umd.js',
'@angular/common': 'js:angular2/common.umd.js',
'@angular/compiler': 'js:angular2/compiler.umd.js',
'@angular/platform-browser': 'js:angular2/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js',
'@angular/http': 'js:angular2/http.umd.js',
'@angular/router': 'js:angular2/router.umd.js',
'@angular/forms': 'js:angular2/forms.umd.js',
'@angular/upgrade': 'js:angular2/upgrade.umd.js',
// other libraries
'rxjs': 'js:rxjs',
'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
However, the individual rxjs files loading slowed down my Angular2 application. So, I decided to bundle RxJs in js/rxjs/bundles/Rx.js. Here's the modified systemjs.config.js:
(function (global) {
System.config({
paths: {
// paths serve as alias
'js:': 'js/',
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'js:angular2/core.umd.js',
'@angular/common': 'js:angular2/common.umd.js',
'@angular/compiler': 'js:angular2/compiler.umd.js',
'@angular/platform-browser': 'js:angular2/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'js:angular2/platform-browser-dynamic.umd.js',
'@angular/http': 'js:angular2/http.umd.js',
'@angular/router': 'js:angular2/router.umd.js',
'@angular/forms': 'js:angular2/forms.umd.js',
'@angular/upgrade': 'js:angular2/upgrade.umd.js',
// other libraries
'rxjs': 'js:rxjs/bundles/Rx.js',
'angular-in-memory-web-api': 'js:in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
}
}
});
})(this);
This change led to an error when starting my application:
Error: (SystemJS) Syntax error
SyntaxError: Syntax error
at Anonymous function (eval code:2:1)
Evaluating http://localhost:37191/js/rxjs/bundles/Rx.js/Subject
Evaluating http://localhost:37191/app/main.js
Error loading http://localhost:37191/app/main.js
The structure of my main.ts file:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
And this is how my app.module.ts looks:
import 'rxjs';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DeviceGroupsViewComponent } from './device-groups-view.component';
import { DeviceGroupService } from './devicegroup.service';
import { SourceTypeService } from './sourcetype.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
declarations: [
AppComponent,
DeviceGroupsViewComponent
],
providers: [
DeviceGroupService,
SourceTypeService
],
bootstrap: [AppComponent]
})
export class AppModule { }
The question now is, what adjustments are needed to make my app work with the bundled Rx.js?