ionic build does not work with typescript@next (>= 2.1)

[chriswep]

I like to use typescript 2.1 (which is right now in the @next channel) because it enables me to use async/await while still targeting ES5.

Anyway, when using ionic build, i.e. the ngc AOT compiler, the build breaks with

[14:39:02] Error: Error at /Users/chris/Sites/emmaus-app/.tmp/app/main.prod.ts:4:36
[14:39:02] Cannot find module './app.module.ngfactory'.
[14:39:02] ngc failed
[14:39:02] ionic-app-script task: "build"
[14:39:02] Error: Error

Downgrading to typescript 2.0.3 solves the problem.

[bytenik]

Just tried installing typescript@next and it still errors on async when targeting ES5. How did you get it to work?

[bytenik]

Nevermind, I'm a moron.

[rob3c]

@MetZ FWIW I can successfully use async/await while targeting ES5 with ionic dev builds (using the hack below), but I haven't figured out a fix for prod builds yet.

This new ionic-app-scripts build system does two kinds of builds, dev and prod. Both systems use a project's tsconfig.json file, but the version of typescript that actually gets used for the build is inconsistent between them. (I should probably create a new issue for that...)

prod does AOT builds that ultimately invoke angular 2's tsc-wrapped module, and the angular 2 AOT compiler will respect a project's locally-installed typescript version. When I try doing a prod build via npm run build with a locally-installed typescript@2.1.0-dev.20161019, for example, I get this error:

 Error: Metadata emit requires the sourceFiles are passed to WriteFileCallback. Update to
 TypeScript ^1.9.0-dev
 ngc failed
 ionic-app-script task: "build"
 Error: Error

That Metadata emit requires... error is thrown in the @angular/tsc-wrapped/src/compiler_host.js file. It's not clear to me if it's strictly an angular 2 issue, or if the sourceFiles arg in their writeFile overload is empty because the ionic build system isn't providing what it needs correctly when using TS 2.1.0-dev.*.

Unlike prod builds, dev builds use a pinned typescript that's currently at 2.0.3, because the app-scripts module has typescript listed as a dependency instead of a peerDependency. That means, when doing dev builds, app-scripts ignores whatever version of typescript you have installed in your project and uses the one in @ionic/app-scripts/node_modules/typescript instead. That one happens to be 2.0.3 in my install, because their package.json declares the dependency as ^2.0.3 (which wouldn't pick up the 2.1.0-dev builds anyway even if it was listed like that as a peerDependency instead - I think it would need to be ^2.0.3 || ^2.1.0-dev). It's confusing, because the app-scripts build does respect the tsconfig.json file in your project. This seems like a bug!

As a workaround to at least enable async/await in non-AOT dev builds while they sort this stuff out, I was able to force app-scripts to respect the newer typescript 2.1.0-dev version installed in my project's node_modules folder by opening a terminal in @ionic/app-scripts and running npm uninstall --save typescript to get rid of the 2.0.3 version in their nested node_modules folder. Then, since node won't find it locally, it bubbles up to the node_modules folder in my project and use that one instead.

I also changed the build script in package.json to:
"build": "ionic-app-scripts build --dev"
to force dev builds even when using ionic run android and such that would otherwise use prod builds.

So assuming angular support for typescript 2.1.0 arrives sometime soon for AOT builds, this enables coding using the convenience of async/await in the meantime. On-device debugging is much faster with non-AOT builds anyway, so this is what I was doing already.

[chriswep]

thanks @rob3c for the detailed explanations, that cleared things up a bit.

[danbucholtz]

@metzc, @rob3c,

For now, don't do this 😆 . We want to support this, but we can't yet. We are limited by Angular AoT. There are also known issues with Typescript transpiling ES2017 to ES5 and uglify-js, etc.

We will add this support as soon as we can but for now it's not something we can offer support for now. Hopefully soon, as I am a huge async/await fanboy.

Thanks,
Dan

[wwoods]

I'd suggest the team not close this issue... Perhaps tag it as angular-dependent or something, but this is still an active issue that is helpful for users to know about. It shouldn't be closed.

[bytenik]

With the team's transition to Webpack, I've had great success with hooking babel-loader into the Webpack config after their custom loader, and then telling TS to generate ES2015. It works perfectly. Its not ideal, but I'll take it.

[hermitdemschoenenleben]

@bytenik : Could you upload your configuration files? This would be very helpful! I tried something similar but did not succeed :(

[danbucholtz]

All,

I don't recommend going off and starting to customize the webpack config yet. Consider that "ejecting" like create-react-app. We can't support custom configs, especially when we're very early in the process with Webpack and app-scripts in general.

Thanks,
Dan

[bytenik]

The following is what I used:

let config = require('@ionic/app-scripts/config/webpack.config.js');
const path = require('path');

console.log("Using alternate Webpack script");

config.devtool = 'source-map';

let loaderEntry = config.module.loaders[0];
let presetPath = path.join(__dirname, '../node_modules/babel-preset-es2015').split('\\').join('/');
loaderEntry.loaders = [ loaderEntry.loader, `babel-loader?{"cacheDirectory": true, "babelrc": false, "presets": [ ["${presetPath}", { "modules": false }] ]}` ];
delete loaderEntry.loader; 

module.exports = config;

[bytenik]

@danbucholtz I know its not recommended, but I don't really have a choice. Without AOT compilation, Ionic2 is unbearably slow on devices for my app -- too slow to deploy. And I already have a mostly built app from the Ionic2 betas, which uses async/await because I had added Babel into the gulp build. At this point, I don't really have an option but to tweak the current rc1 build process.