Using <rxjs-spy> with SystemJS loader

I tried to use rxjs-spy with Angular app 5.1.0 which is using SystemJS 0.20.19 loader but with no luck. It seams that this lib is very prommising so I would like to go much more deeply. But just for the simple imports …

import { create } from 'rxjs-spy/spy-factory';
const spy = create();
import { tag } from 'rxjs-spy/operators/tag';

I tried these ways to config relevant part is systemjs.config.js:

1) Standard way … loading each JS file separately …

paths: {'npm:': './node_modules/'},
map: {
	...
	'rxjs-spy': 'npm:rxjs-spy',
},
packages: {
	...
	'rxjs-spy': {
		defaultExtension: 'js'
	}
}

… all files loaded successfully except plugin.js: Fetch finished loading: GET "http://localhost:8080/node_modules/rxjs-spy/spy-factory.js". Fetch finished loading: GET "http://localhost:8080/node_modules/rxjs-spy/spy-core.js". … Fetch finished loading: GET "http://localhost:8080/node_modules/rxjs-spy/operators/hide.js". … Unexpected token < Evaluating http://localhost:8080/node_modules/rxjs-spy/plugin.js

2) Re-bundling the lib … loading all things in one step = preferred way … using …

bundles: {
	"assets/rxjs-spy-bundle/RxSpy.min.js": [
		"rxjs-spy/*",
		"rxjs-spy/add/operator/*",
		"rxjs-spy/devtools/*",
		"rxjs-spy/operator/*",
		"rxjs-spy/operators/*",
		"rxjs-spy/plugin/*"
	]
}

and re-bundling via Gulp script:

gulp.task('rxjs-spy', function() {
	// SystemJS build options
	var options = {
		normalize: true,
		runtime: false,
		sourceMaps: false,
		sourceMapContents: false,
		minify: true,
		mangle: true
	};
	var builder = new systemjsbuilder('./');
	builder.config({
		paths: {
			"n:*": "node_modules/*",
			"rxjs-spy/*": "node_modules/rxjs-spy/*.js",
		},
		map: {
			"rxjs-spy": "n:rxjs-spy",
		},
		packages: {
			"rxjs-spy": {main: "index.js", defaultExtension: "js"},
		}
	});
	builder.bundle('rxjs-spy', 'assets/rxjs-spy-bundle/RxSpy.min.js', options);
});

… but the Gulp script ended with an error … unhandled rejection Error on fetch for rxjs-spy/plugin at file:///C:/Data/Projects/LocalHost/MLC-CSS/node_modules/rxjs-spy/plugin.js

3) Using the UMD lib directly and loaded via <script> tag in index.html … It does’n work at all … <script src="node_modules/rxjs-spy/bundles/rxjs-spy.min.umd.js" type="text/javascript"></script> … an error appears: Error: Unexpected token < Evaluating http://localhost:8080/rxjs-spy/spy-factory

Summary It looks that there is something wrong with plugin.js because if not … ways per 1) and 2) would work probably.

[cartant]

Hmm, I’m not convinced; SystemJS has caused me so much hassle in the past and it’s the fourth 😬 bundling tool (after Browserify, Webpack, and Rollup) that I’ve had to deal with.

But it sounds like it’s working for you, so that’s cool.

[cartant]

@mlb6 Unless you are using System JS - and it doesn’t sound like you are - yours is a separate issue, so please open it as such.

And the message you referenced is a warning that can be ignored - as explained above.