Instantly share code, notes, and snippets.

Embed
What would you like to do?

Fixing RxJS import problems with Ionic's production build

Recently, I upgraded to Ionic 3.9.x, which included an upgrade to Angular 5.x as well. Everything went smooth, even I did not understand the RXJS stuff in Ionic's change log. But... when I did the first time a production build (ionic build --prod), I got a strange error:

Error: ./node_modules/rxjs/observable/BoundCallbackObservable.js Module build failed: TypeError: Cannot read property 'type' of undefined at Object.getEffectiveTypeAnnotationNode

After googling around, I found 2 solutions:

  • Update to the newest TypeScript version 2.6.2.
     However this is not a good idea since Angular needs TypeScript in version >=2.4.2 <2.5.0.
  • Modify the RxJS imports.
    Unfortunately, this concerns the stuff I didn't understand. Especially, I didn't import any operators as it is described in the change log. But I had some other imports from RxJS...

So, finally, I searched for all rxjs imports. E.g.

import { Subscription } from "rxjs";

I had to change in

import { Subscription } from "rxjs/Subscription";

BTW: TSLint could help here as well. With the import-blacklist rule, you can find all RxJS imports. Just add the following to your tslint.json:

"import-blacklist": [
  true,
  "rxjs"
]

Now you get the warning:

The import is blacklisted, import a submodule instead

Unfortunately, importing a submodule violates another TSLint rule:

Submodule import paths from this package are disallowed; import from the root instead

Therefore you need another TSLint configuration as well:

"no-submodule-imports": [
  true,
  "rxjs"
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment