Karma: [web-server]: 404: /base/node_modules/rxjs/operators.js

[ersimont]

After upgrading to Angular 5 I wanted to follow this recommendation from the upgrade guide:

For each RxJS Operator you import, you should now import from 'rxjs/operators' and use the pipe operator. Read more

In my case, that meant making a couple changes like this:

// import 'rxjs/add/operator/take';
import { take } from 'rxjs/operators';

// this.$.take(1).subscribe((v) => { value = v; });
this.$.pipe(take(1)).subscribe((v) => { value = v; });

I'm not sure how to modify my Karma config to support this change. I'm currently getting a 404 when the browser tries to load a file /base/node_modules/rxjs/operators.js:

02 11 2017 21:46:42.016:WARN [web-server]: 404: /base/node_modules/rxjs/operators.js

Any help would be appreciated - and probably worth updating in this repo.

[cyrilletuzi]

In karma-test-shim.js > System.config() > packages, add :

'rxjs/operators': { defaultExtension: 'js', main: 'index' },

[ersimont]

Thanks! That worked for me.

[ersimont]

Ahh - but a word of warning for others: this approach causes the browser to load all rxjs operators, not just the ones you import. There may be more setup that can fix it? Rxjs gives instructions for how to fix it with webpack here.

The alternative they mention is to import like this:

// import { map, take } from 'rxjs/operators';
import { map } from 'rxjs/operators/map';
import { take } from 'rxjs/operators/take';

Loading all operators doubles the already long load time for tests for me from ~12 seconds to ~22 seconds.

[cyrilletuzi]

It's normal, Systemjs is for development. Tree-shaking happens only in production, requiring complex tool configuration, and it takes time too.

It's normal to use top level imports (it's what you do when you do import { x } from '@angular/core'), deep imports should be avoided.

[ersimont]

Normal or not, I'll stick with deep imports for now. It is recommended as an alternative in the official rxjs docs, and reduces the time it takes to run my tests by 50% every time I click refresh - so it's a pretty easy choice!