Ionic CLI V2: TypeScript with generator functions


#1

I develop an app with Ionic 2 and TypeScript that relies heavily on Redux (ng2Redux: https://github.com/wbuchwalter/ng2-redux).
Instead of redux-thunk I use redux-saga as middleware, which works really great together with ng2/Ionic 2!

redux-saga is used with generator functions (function*…). TypeScript only supports them when targetting ES6 in tsconfig.json. It won’t compile otherwise. So far, so good, a “ionic serve” just works, as the resulting app.bundle.js in ES6 is handled just fine by the Chrome browser.
But on mobile devices, you cannot rely on ES6 supported by the webview of the target device. That’s no option for most devices out there at the moment. So I guess I have to “babelify” the built bundle down to ES5, enriched with the corresponding babel plugin to support generator functions (eventually babel-plugin-regenerator).

Is there a convenient way to achieve this with the current state of Ionic CLI V2? I’m a bit puzzled where to hook the babel step. Or will I have to wait until the CLI fully supports Gulp, where it would be easier to add the babel step?


#2

Isn’t ES5 the default target for TypeScript in Ionic 2? I realize your post is a couple of months old so maybe it has changed since then.

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
...

By the way, would you be willing to share you app source? I’m trying to wrap my head around redux/ngrx etc. and would really appreciate a real world example of using the redux pattern in an Ionic app.


#3

Generator functions (yield) are not allowed when targetting ES5 in TS. But this will be possible with TypeScript 2.0:

At the time of writing, there were a lot of changes in the Ionic CLI area. Maybe today it would be easier to integrate a babelify step.
But for me it’s too late. I already abandoned Ionic 2 in favour of React Native (but with redux/redux-saga).