angular v6 - rxjs (Module not found: Error: Can't resolve 'rxjs/observable/from')

[davidfaria]

Hello, I am updating the angular project v4 to angular v6 ....
when I go up the server "ng serve" ... shows the error below:

Module not found: Error: Can not resolve 'rxjs / observable / from'
Module not found: Error: Can not resolve 'rxjs / observable / timer'

ERROR in ./node_modules/ngx-dfp/lib/service/dfp-refresh.service.js

var timer_1 = require ("rxjs / observable / timer"); * does not work *
var from_1 = require ("rxjs / observable / from"); * does not work *

file: packge.json

"dependencies": {
"@ angular / animations": "^ 6.0.0",
"@ angular / common": "^ 6.0.0",
"@ angular / compiler": "^ 6.0.0",
"@ angular / core": "^ 6.0.0",
"@ angular / forms": "^ 6.0.0",
"@ angular / http": "^ 6.0.0",
"@ angular / platform-browser": "^ 6.0.0",
"@ angular / platform-browser-dynamic": "^ 6.0.0",
"@ angular / platform-server": "^ 6.0.0",
"@ angular / router": "^ 6.0.0",
"@ nguniversal / common": "^ 6.0.0",
"@ nguniversal / express-engine": "^ 6.0.0",
"@ nguniversal / module-map-ngfactory-loader": "^ 6.0.0",
"angulartics2": "^ 6.2.0",
bootstrap: "^ 4.1.1",
"core-js": "^ 2.4.1",
"ngx-dfp": "^ 1.3.2",
"ngx-owl-carousel": "^ 2.0.7",
"popper.js": "^ 1.14.3",
"rxjs": "6.2.1",
"webpack-cli": "^ 2.0.14",
"zone.js": "^ 0.8.26"
},
"devDependencies": {
"@ angular-devkit / build-angular": "0.6.0",
"@ angular / cli": "6.0.8",
"@ angular / compiler-cli": "6.0.7",
"@ angular / language-service": "6.0.7",
"@ types / node": "^ 8.0.30",
"codelyzer": "^ 4.0.2",
"cpy-cli": "^ 1.0.1",
"express": "^ 4.15.2",
"http-server": "^ 0.10.0",
"pre-commit": "^ 1.2.2",
"reflect-metadata": "^ 0.1.10",
"ts-loader": "^ 4.2.0",
"tslint": "^ 5.7.0",
"typescript": "~ 2.7.2"
}

[atwwei]

rxjs-compat required

[wmaurer]

@atwwei Since rxjs-compat is required, could you please update the RxJS imports to the new style? The way the RxJS functions and operators are imported right now means that the bundle size is much bigger.

I see you did this at one stage, but then changed the imports to deep paths. I would suggest:

import { Subscription, timer, from } from 'rxjs';

instead of:

import { Subscription } from 'rxjs';
import { timer } from 'rxjs/observable/timer';
import { from } from 'rxjs/observable/from';

Doing this would reduce the amount of the RxJS library that's bundled.

[atwwei]

@wmaurer The code style is used to stay most backwards compatibility.

Some descriptions from rxjs-compat:

This is a rewrite of Reactive-Extensions/RxJS. This rewrite is meant to have better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.

The call stack:

• import { timer } from 'rxjs/observable/timer';
• export * from 'rxjs-compat/observable/timer';
• export { timer } from 'rxjs';

[wmaurer]

But if are using RxJS 6 and you change to the new style of imports (in this library it's only a few lines of code!), then you don't need to use rxjs-compat at all.

rxjs-compat is only there for the case where you have a code base already using RxJS 5, and you want to upgrade to RxJS 6 without having to change all your imports. It's simply there to make migration easier.

The way you're importing the functions and operators now means that tree-shaking is not working properly. Therefore the Angular build is including all operators. If you were to change to the new style, then tree-shaking would work properly.

[atwwei]

rxjs-compat is removed in ngx-dfp@1.4.0, then use ngx-dfp@rxjs5 as the backward compatible version.

[wmaurer]

Thank you, the imports look great now.